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

sam 1881 css vertical-alignment

为什么不行vertical-align: middle?然而,vertical-align: top 确实有效.

span{
  vertical-align: middle;
}

Michael Hare.. 2161

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

<!-- 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"时),但是将文本物理移动到垂直中间是奇怪而且不直观的必须将属性应用于旁边的图像. (185认同)
  • @ BrainSlug83这当然不奇怪,但我可以看到新人如何被这个绊倒.默认情况下,图像将放置在文本基线上.您所做的就是移动图像相对于文本的位置.至于使用float:left,你应该在包含图像和文本的块上,或者在文本本身上这样做. (34认同)
  • @ BrainSlugs83同意它可以被视为违反直觉.这需要一点心理转变,因为根据CSS,你需要做的是将图像置于文本中心.不是图像的文字. (14认同)
  • 在IE 6和7中测试过. (12认同)
  • 如果增加`span`字体大小,它不起作用.见[我的回答](http://stackoverflow.com/a/22603786/478018). (6认同)
  • 不再有效.回答@Mori发布的答案. (2认同)
  • 但是如果你把图像尺寸设置得更小(比如`width:16px; height:16px`),你可以看到图像太低了...... (2认同)

Adam Lassek.. 336

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

单线垂直对齐:中间

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

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

可变容器高度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的人打交道. (15认同)
  • 让Internet Explorer与众不同 (7认同)
  • `display:table`在各种浏览器中都有一些限制(在IE11中,如果元素在表格单元格内,则max-height`不起作用),因此在某些边缘情况下,使用表格单元格垂直对齐并不是一个好主意. (2认同)

Mori.. 91

将您更改div为Flex容器:

div {display:flex;}


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

方法1:

div {align-items:center;}

DEMO


方法2:

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

DEMO


尝试不同的宽度和高度值img和不同的字体大小值span,你会发现它们始终保持在容器的中间.


小智.. 86

您必须应用于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在于,第一个移动元素相对于框的基线(放置在需要的任何地方,以实现所有垂直对齐,因此感觉相当不可预测),第二个相对于线框的外边界(这是更有形).

  • 实际上,这个答案确实帮助了我,尽管已经接受了答案的超级投票.感谢名单! (8认同)
  • 这真是一个很好的答案.我总是认为,如果没有诡计,真正无法解决轻微偏离垂直中心的问题. (6认同)

Danield.. 60

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

如果有人需要将多行文本垂直居中到图像,这里有几种方法(方法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 */
}

  • #1方法非常棒!我有两个div - 一个有文本 - 另一个 - 一个图像.现在他们都垂直居中.而且非常简单.在FF34.0.5和IE8中测试过.非常感谢. (4认同)
  • 如果图像比文本更大(高度),则方法可以正常工作.但是如果图像较小,那么除了最后一个之外的所有图像都会失败 (3认同)

HTMLnewBie.. 28

此代码适用于IE以及FF:

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

  • 是的......但是"自动"几乎没有变化以避免硬编码 (8认同)

Ikke.. 19

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

  • 然而,在表中执行此操作将通过"vertical-align:center"实现.CSS打击. (6认同)
  • 我尝试将行高设置为30px,但仍然无法正常工作. (2认同)

小智.. 12

基本上,你必须得到CSS3.

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


小智.. 11

为了记录在案,对齐"命令"不应该在一个SPAN工作,因为它是一个在线的标签,而不是块级标签.对齐,边距,填充等内容不适用于内嵌标记,因为内联点不会破坏文本流.

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

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

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

  • `文本align`和`垂直align`(及其应用对`td`元件,用于遗留目的除外)是专门意味着`inline`和`直列block`元件(`span`,`img`,等等). (2认同)

小智.. 11

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

这是最简单的方法.

  • 请注意,如果您的内容分布在多行中,则无法正常工作. (3认同)

Touhid Rahma.. 11

使用line-height:30px的跨度,使文字与图片对齐:

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


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


AspiringCana.. 6

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

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


Mr.Pandya.. 6

写下这些span属性

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

使用display:inline-block;当您使用vertical-alignproperty.Those是相关属性


Super User.. 5

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


归档时间:

查看次数:

1200127 次

最近记录:

10 月,2 周 前