垂直对齐图像旁边的文字？

时间：2009-01-28 21:01:50

标签： css vertical-alignment

为什么vertical-align: middle不起作用？然而，vertical-align: top 确实工作。

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

23 个答案:

答案 0 :(得分：2073)

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

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

答案 1 :(得分：332)

以下是vertical-align的一些简单技巧：

单线垂直对齐：中间

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

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

多行vertical-align：middle 

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

如果您必须支持IE的古老版本＆lt; = 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%);

答案 2 :(得分：89)

将div更改为弹性容器：

div {display:flex;}


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

方法1： 

div {align-items:center;}

DEMO

方法2： 

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

DEMO

在img上尝试不同的宽度和高度值以及span上不同的字体大小值，您会看到它们始终位于容器的中间位置。

答案 3 :(得分：82)

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

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

accepted answer确实将图标置于其旁边文本x高度的一半左右（如CSS specs中所定义）。如果文字的顶部或底部突出了上升或下降，那么这可能是足够好但可以看起来有点偏离：

centered icon comparison

在左侧，文本未对齐，右侧如上所示。可在此article about vertical-align中找到现场演示。

有没有人谈到为什么vertical-align: top在场景中有效？问题中的图像可能比文本高，因此定义了线框的上边缘。 span元素上的vertical-align: top然后将其放置在线框的顶部。

vertical-align: middle和top之间行为的主要区别在于，第一个元素相对于框的基线移动元素（放置在任何需要的地方，以实现所有垂直对齐，因此感觉相当不可预测的）和第二个相对于线框的外边界（更有形）。

答案 4 :(得分：59)

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

如果有人需要将多行文字垂直居中到图像，可以采用以下几种方法 （方法1和2受this CSS-Tricks article启发）

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

答案 5 :(得分：27)

此代码适用于IE以及FF：

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

答案 6 :(得分：19)

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

答案 7 :(得分：12)

基本上，你必须要使用CSS3。

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

答案 8 :(得分：11)

对于记录，对齐“命令”不应在SPAN上起作用，因为它是内嵌标记，而不是块级标记。对齐，边距，填充等内容不适用于内嵌标记，因为内联点不会破坏文本流。

CSS将HTML标记分为两组：内联和块级。搜索“css block vs inline”并出现一篇精彩文章......

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

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

答案 9 :(得分：10)

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

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

答案 10 :(得分：10)

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

这是最简单的方式。

答案 11 :(得分：8)

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

This solution仅在您知道图片的宽度时才有效。

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

答案 12 :(得分：6)

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

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

答案 13 :(得分：6)

编写这些范围属性

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

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

答案 14 :(得分：4)

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

答案 15 :(得分：3)

例如，在jQuery mobile的按钮上，您可以通过将此样式应用于图像来稍微调整一下：

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

答案 16 :(得分：2)

多行解决方案：

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 +

答案 17 :(得分：2)

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

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

答案 18 :(得分：1)

首先，建议不要推荐内联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>

答案 19 :(得分：0)

在CSS中使用flex property。

如果要使用 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>

答案 20 :(得分：0)

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

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 :(得分：-1)

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

答案 22 :(得分：-4)

你可能想要这个：

<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并不烦人。你只是不读the documentation。 ; P

相关问题
最新问题