vertical-align: middle为什么不起作用？但是，vertical-align: top确实可以工作。




 span{
  vertical-align: middle;
} 

 <div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>




评论

这是一篇有趣的文章：了解vertical-align

#1 楼

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




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





在FF3中进行了测试。

现在您可以将flexbox用于这种布局。




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

 <div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>




评论

“由于所有内容都在同一行中，因此它实际上是您要对齐的图像，而不是文本。” -不，图片的位置很好。我们希望文本对齐。不是图像。 -我知道这行得通（在某些情况下，例如：当您不在图像上使用“ float：left”时...），但是将文本物理地移动到垂直中间位置只是一种奇怪且不直观的做法则必须将属性应用于旁边的图像。

– BrainSlugs83
2011-09-28 2:51
@ BrainSlug83当然，这并不奇怪，但我可以看到新人如何被此绊倒。默认情况下，图像将放置在文本基线上。您要做的只是将图像相对于文本的位置移动到。至于使用float：left，您应该在包含图像和文本的块上，或者在文本本身上执行此操作。

–jamesrom
2011年12月7日，0：57
@ BrainSlugs83同意可以被认为违反直觉。这需要一些思想上的转变，因为根据CSS，您需要做的就是将图像居中放置在文本上。不是文本中的图像。

– Greg Pettit
2012年1月25日下午4:26
这个答案更好：stackoverflow.com/a/489528/949055，因为当文本换行时，它可以正常工作。仅当文本从不换行时才显示所示的方法。

–肯尼斯·本杰明（Kenneth Benjamin）
13年8月26日在16:33


如果您增加跨度字体大小，则无法使用。看我的答案。

–森
2014年3月24日在8:06

#2 楼

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

单行vertical-align：中间

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

<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错误对我们有利。在容器上设置top:50%，在内部div上设置top:-50%，可以获得相同的结果。我们可以使用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）

将以下3行CSS应用于元素将使其在父元素内垂直居中，而与父元素的高度无关：

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


评论

display：table和display：table-cell CSS选择器可以很好地工作，当然，在IE7及以下版本中除外。在将头发拉扯了几个小时之后，我认为我真的不需要与仍然使用IE7-的任何人打交道。

– Banncee
13年4月3日在13:51
display：table在各种浏览器中都有一些限制（在IE11中，如果元素位于表格单元格内，则max-height不起作用），因此在某些边缘情况下，使用表格单元格垂直对齐不是一个好主意。

– Jahu
15年4月28日在12:20

#3 楼

将您的div更改为flex容器：

 div { display:flex; }



现在有两个使所有内容的对齐方式居中的方法：

方法1：

 div { align-items:center; }


DEMO


方法2：

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


DEMO


在img上尝试使用不同的宽度和高度值，在span上尝试使用不同的字体大小值，您会发现它们始终保留在容器的中间。

评论

为了使文本在图像旁边或图像之间居中（水平放置在页面上），还需要添加justify-content：center;对于间隔（不使用
标记），您可能还想添加一个填充：1em;。对我们现代浏览器开发人员来说是个伟大的更新。

– CSS
2015年12月3日在1:39


这很好。我尝试了每个其他答案，尽管它们在一定程度上发挥了作用，但对我却没有用。我大约需要对齐三行文字，这个答案非常有效。谢谢@森

–semaj0
16年5月24日13:58

#4 楼

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




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





接受的答案确实使图标居中位于其旁边文本的x高度的一半左右（如CSS规范中所定义）。如果文本的上升或下降部分突出显示在顶部或底部，那么这可能已经足够好了，但看起来可能有点偏离：



在左侧，文本未对齐，如右图所示。可以在本文中找到有关vertical-align的实时演示。

有人谈论过为什么vertical-align: top在这种情况下有效吗？问题中的图像可能比文本高，因此定义了线框的顶部边缘。然后将span元素上的vertical-align: top放在行框的顶部。

vertical-align: middle和top在行为上的主要区别在于，第一个相对于框的基线（放置在需要满足所有垂直对齐的位置，因此感觉很难预测）移动元素，第二个相对于框的基线移动元素线框的外边界（更明显）。

评论

我注意到顶部的作品和底部的作品，但中间没有。基本上，“中间”不定义为顶部和底部之间的中间位置。它的意思更多是“当它比文字高时，两种方式均等地突出。”在这里，您不需要vertical-align：在文本的中间，只需要图像。

–柯蒂斯
17-10-23在20:40

#5 楼

接受的答案中使用的技术仅适用于单行文本（demo），而不适用于多行文本（demo）-如此处所述。

如果有人需要将多行文本垂直居中到图像，这里有几种方法
（此CSS-Tricks文章启发了方法1和2）

方法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 */
}


评论

如果图像（在高度上）大于文本，则该方法可以正常工作。但是，如果图像较小，则除最后一个图像外所有图像均会失败

–托马斯
2015年4月9日在16:35

#6 楼

此代码在IE和FF中均有效：

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


#7 楼

因为您必须将line-height设置为div的高度才能起作用

评论

我尝试将line-height设置为30px，但仍然无法正常工作。

–山姆
09年1月28日在21:08

#8 楼

作为记录，对齐“命令”在SPAN上不起作用，因为它是行内标签，而不是块级标签。诸如对齐，边距，填充等之类的内容在行内标签上不起作用，因为行内的目的不是破坏文本流。

CSS将HTML标签分为两类：行和块级。搜索“ css块与内联”，然后出现一篇很棒的文章...

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

（了解CSS的核心原理是使其不那么令人讨厌的关键）

评论

文本对齐和垂直对齐（出于传统目的在td元素上的应用除外）专门用于内联和内联块元素（span，img等）。

–凯文·佩诺（Kevin Peno）
2012年6月15日17:45

#9 楼

基本上，您必须使用CSS3。

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


#10 楼

使用line-height:30px作为跨度，以使文本与图像对齐：

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


#11 楼

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

这是最简单的方法。

评论

请注意，如果您的内容分布在多行中，则此方法将无法正常工作。

–艾哈迈德·阿尔菲（Ahmad Alfy）
2012年11月6日，11：31
然后为什么不只是line-height：100％？

–吉恩·保罗·A·K·艾尔·韦特
19年11月5日下午5:31

#12 楼

在所有这些答案中都没有看到使用margin的解决方案，因此这是我对这个问题的解决方案。

仅当您知道图像的宽度时，此解决方案才有效。

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


评论

这是确切的解决方案。它也适用于多行文本...以上不适用于多行文本。

–efirat
16年9月2日在14:10

#13 楼

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


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

评论

在图像大小未知或动态的情况下无济于事。

–丹
2015年9月18日在12:42

#14 楼

写下这些跨度属性

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


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

#15 楼

您可以使用inline element属性将图像设置为display 




 <div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>




#16 楼

例如，在jQuery mobile的按钮上，您可以通过对图像应用以下样式来对其进行一些调整：

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


#17 楼

多线解决方案：

http://jsfiddle.net/zH58L/6/ 

<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 +中运行

#18 楼

我同意，这可能会造成混淆。尝试利用表格功能。我使用这个简单的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; }


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

#19 楼

首先根本不建议使用内联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>




评论

使用内联CSS有很多充分的理由。 React：例如JS中的CSS。

– jlyonsmith
18 Mar 19 '18 at 13:22

#20 楼

不知道为什么它不能在导航的浏览器中呈现它，但是当我尝试显示带有图像和居中文本的标题时，我通常使用这样的代码片段，希望它会有所帮助！

https://output.jsbin.com/jeqorahupo 

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>


#21 楼

在CSS中使用flex属性。

如果要通过在align-items:center;中在flex中使用水平对齐文本，请在justify-content:center;中在flex中使用垂直对齐文本。




 div{
  display: flex;
  align-items: center;
} 

 <div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>




在CSS中使用tabel-cell。



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

 <div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>




#22 楼

<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>


#23 楼

您可能想要这样：

<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

评论

如果图像高度是动态的？我被搞砸了：( PS，只是因为存在CSS的文档并没有使它烦人或不直观。

–山姆
09年1月28日在21:13
您的意思是讨厌和直觉吗？您没有在问题中指定他的图像高度是否是动态的，因此我假设固定高度就是您要坚持的高度。

–更强
09年1月28日在21:15
我和山姆在一起。我认为项目应该以img高度为中心。我认为我们都可以放松一些。

–迈克尔·哈伦（Michael Haren）
09年1月28日在21:16