提问



为什么赢得t vertical-align: middle工作?然而,vertical-align: top 确实工作。


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

最佳参考


实际上,在这种情况下它非常简单:将垂直对齐应用于图像。由于它全部在一行中,它实际上是您想要对齐的图像,而不是文本。




<!-- 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>



以下是一些垂直对齐的简单技巧:


单线垂直对齐:中间



这很容易:将文本元素的行高设置为等于容器的行高


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


多行vertical-align:bottom



绝对地将内部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错误对我们有利。在容器上设置top:50%top:-50%在内部div上,你可以实现相同的结果。我们可以使用IE不支持的另一个功能将两者结合起来:高级CSS选择器。


<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



此解决方案需要比其他解决方案稍微更现代的浏览器,因为它使用transform: translateY属性。 (http://caniuse.com/#feat=transforms2d)[53]


将以下3行CSS应用于元素将垂直居中于其父元素,而不管父元素的高度如何:


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

其它参考1


div更改为弹性容器:


div {display:flex;}


点击
现在有两种方法可以使所有内容的对齐居中:


方法1:


div {align-items:center;}


DEMO [54]





方法2:


div * {margin-top:auto; margin-bottom:auto;}


DEMO [55]





img上尝试不同的宽度和高度值以及span上的不同字体大小值,你会看到它们总是保留在容器的中间。

其它参考2


您必须将vertical-align: middle应用于两个元素才能使其完美居中。




<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>



接受的答案中使用的技术仅适用于单行文本(演示),但不适用于多行文本(演示) - 如此处所述。[56] [57]


如果有人需要将多行文本垂直居中到图像,这里有几种方法
(方法1和2受CSS-Tricks文章的启发)[58]


方法#1:CSS表格( FIDDLE )(IE8 +(caniuse))



CSS:[59] [60]


div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}


方法#2:容器上的伪元素( FIDDLE )(IE8 +)



CSS:[61]


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 (以上小提琴包含供应商前缀):[62] [63]


div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

其它参考3


此代码适用于IE以及FF:


<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

其它参考4


因为你必须将line-height设置为div的高度才能使其工作

其它参考5


基本上,你将不得不开始使用CSS3。


-moz-box-align: center;
-webkit-box-align: center;

其它参考6


对于记录,对齐命令不应该在SPAN上工作,因为它是内嵌标记,而不是块级标记。比如对齐, margin,padding等不会对内联标记起作用,因为内联点不会破坏文本流。


CSS将HTML标记分为两组:内联和块级。搜索css block vs inline并出现一篇很棒的文章......


http://www.webdesignfromscratch.com/html-css/css-block-and-inline/[64]


(了解核心CSS原则是它不是那么烦人的关键)

其它参考7


您可以做的另一件事是将文本s line-height设置为<div>中图像的大小。然后将图像设置为vertical-align: middle;


这是最简单的方法。

其它参考8


使用line-height:30px作为范围,以便文本与图像对齐:


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

其它参考9


在这些答案中,Haven还没有找到margin的解决方案,所以这是我解决这个问题的方法。


仅当您知道图片的宽度时,此解决方案才有效。 [65]


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;
}

其它参考10


background:url(../images/red_bullet.jpg) left 3px no-repeat;


我通常使用3px代替top。通过增加/减少该值,可以将图像更改为所需的高度。

其它参考11


写下这些span属性


span{
    display:inline-block;
    vertical-align:middle;
}


使用display:inline-block;使用vertical-align属性时。这些是相关属性

其它参考12


例如,在jQuery mobile中的按钮上,您可以通过将此样式应用于图像来稍微调整它:


.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

其它参考13


您可以使用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>



多线解决方案:


http://jsfiddle.net/zH58L/6/[66]


<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 +

其它参考14


我同意,这可能令人困惑。尝试使用表格功能。我使用这个简单的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; }


请注意,您必须设置样式并调整图像和表容器的大小,以使其按您的需要工作。请享用。

其它参考15


首先,不建议使用内联CSS ,它确实搞乱了你的HTML。


要对齐图像和跨度,您只需执行vertical-align:middle


.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.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>


正如其他人所建议的那样,在图像上尝试vertical-align:


<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>


CSS并不烦人。你只是不读文档。 ; P [67]