在图像旁边垂直对齐文字?


Answers:


2249

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

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


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

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

14
@ BrainSlugs83同意可以被认为违反直觉。这需要一些思想上的转变,因为根据CSS,您需要做的就是将图像居中放置在文本上。不是文本中的图像。
格雷格·佩蒂特

6
如果您增加span字体大小,它将不起作用。看我的回答

2
但是,如果将图像尺寸设置为较小的尺寸(如width:16px;height:16px),则可以看到图像太小了……
Matthieu Charbonnier16年

340

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

单行垂直对齐:中间

这很简单:将text元素的line-height设置为等于容器的高度

<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%在容器上,并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>

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

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

将以下3行CSS应用于元素将使其在父元素内垂直居中,而不考虑父元素的高度:

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

15
display:tabledisplay:table-cell当然除了CSS选择工作的伟大,在IE7及以下。在将头发拉扯了几个小时之后,我认为我真的不需要与仍然使用IE7-的任何人打交道。
banncee

2
display:table在各种浏览器中都有一些限制(max-height如果元素在表单元格之内,则在IE11中不起作用),因此在某些情况下,使用表单元格垂直对齐不是一个好主意。
jahu 2015年

97

将您更改div为flex容器:

div { display:flex; }


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

方法1:

div { align-items:center; }

演示


方法2:

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

演示


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


为了使文本在图像旁边或图像之间居中(在页面上水平居中),您还需要添加justify-content: center;和间距(不使用<br/>标签),您可能还想放入padding: 1em;。对我们现代浏览器开发人员来说是个伟大的更新。
CSS

这很好。我尝试了每个其他答案,虽然它们在一定程度上发挥了作用,但对我却没有用。我大约需要对齐三行文字,这个答案非常有效。感谢@Mori
semaj0 '16

87

您必须同时应用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在这种情况下可行吗?问题中的图像可能比文本高,因此定义了线框的顶部边缘。vertical-align: top然后将其放在span元素上,然后将其放在行框的顶部。

vertical-align: middle和之间的主要区别top在于,第一个相对于框的基线(放置在需要完成所有垂直对齐的位置,因此感觉很难预测)相对于基线移动元素,第二个相对于线框的外部边界(即更明显)。


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

61

如此处所述,接受的答案中使用的技术仅适用于单行文本(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 */
}

3
如果图像(在高度上)大于文本,则该方法可以正常工作。但是,如果图像较小,则除最后一个图像以外的所有图像都将失败
Thomas Thomas

28

这段代码可在IE和FF中使用:

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

19

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


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

12

基本上,您必须开始使用CSS3。

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

11

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

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

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

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


2
text-alignvertical-align(连同其上的应用程序的例外td用于遗留目的元件)具体意味着inlineinline-block元件(spanimg等)。
凯文·佩诺


11

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

这是最简单的方法。


3
请注意,如果您的内容分布在多行中,则此方法将无法正常工作。
Ahmad Alfy 2012年

然后为什么不只是line-height:100%?
Jean Paul AKA el_vete

8

有没有看到一个解决方案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;
}

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

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

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


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

6

写下这些跨度属性

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

使用display:inline-block;当您使用vertical-alignproperty.Those的产生密切相关性


6

您可以将图像设置为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>


3

例如,在jQuery mobile的按钮上,您可以通过将以下样式应用于图片来对其进行一些调整:

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

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 +


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

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


0

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


2
使用内联CSS有很多充分的理由。 React:以JS中的CSS为例。
jlyonsmith '18

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>

-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并不令人讨厌。您只是不阅读文档。; P


6
如果图像高度是动态的?我拧:( PS,只是因为文件存在CSS不让它讨厌或不直观。
SAM

你的意思是讨厌和直觉吗?您没有在问题中指定他的图像高度是否是动态的,因此我假设固定高度就是您要坚持的高度。
斯特拉格

2
我和山姆在一起。我认为项目应该以img高度为中心。我认为我们都可以放松一些。
Michael Haren
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.