在html将文本垂直对齐到图像旁边？

为什么行不通？然而，确实有效。vertical-align: middlevertical-align: top

span{
  vertical-align: middle;
}

<div>
  <img src="https://www.lanrenmb.com/html" alt="small img" />
  <span>Doesn't work.</span>
</div>

分割线

网友回答：

将您的容器更改为弹性容器：div

div { display: flex; }

现在有两种方法可以将所有内容的对齐方式居中：

方法一：

div { align-items: center; }

演示

方法一：

div * { margin: auto 0; }

演示

尝试不同的宽度和高度值，尝试不同的字体大小值，您将看到它们始终保留在容器的中间。imgspan

分割线

网友回答：

实际上，在这种情况下非常简单：将垂直对齐应用于图像。由于它们都在一行中，因此它实际上是您想要对齐的图像，而不是文本。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

在FF3中测试。

现在，您可以将弹性框用于这种类型的布局。

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

分割线

网友回答：

以下是一些垂直对齐的简单技术：

单行垂直对齐：中间

这很简单：将文本元素的行高设置为等于容器的行高

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行垂直对齐：底部

相对于其容器绝对定位内部 div

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行垂直对齐：中间

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果必须支持旧版本的 IE <= 7

为了使它全面正常工作，您必须稍微破解CSS。幸运的是，有一个IE错误对我们有利。在容器和内部 div 上设置，您可以获得相同的结果。我们可以使用 IE 不支持的另一个功能将两者结合起来：高级 CSS 选择器。top:50%top:-50%

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度垂直对齐：中间

此解决方案需要比其他解决方案稍微现代的浏览器，因为它利用了该属性。（http://caniuse.com/#feat=transforms2d）transform: translateY

将以下 3 行 CSS 应用于元素将使其在其父元素内垂直居中，而不管父元素的高度如何：

position: relative;
top: 50%;
transform: translateY(-50%);

模板简介：该模板名称为【在html将文本垂直对齐到图像旁边？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。