关于css：垂直对齐图像旁边的文字？


Vertically align text next to an image?

为什么vertical-align: middle不能工作？然而，江户十一〔一〕的确起了作用。

1
2
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
相关讨论

实际上，在本例中，它非常简单：对图像应用垂直对齐。因为它都在一行中，所以它实际上是您想要对齐的图像，而不是文本。

1
2
3
4
<!-- moved"vertical-align:middle" style from span to img -->

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

在FF3中进行测试。

现在您可以使用flexbox进行这种布局。

1
2
3
4
.box {
   display: flex;
   align-items:center;
}
1
2
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>

相关讨论

下面是一些简单的垂直对齐技术：

单行垂直对齐：中间

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

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

多行垂直对齐：底端

绝对定位内部分区相对于其容器的位置

1
  This is positioned on the bottom

多行垂直对齐：中间

1
  This is positioned in the middle

如果你必须支持古老版本的IE<=7

为了让这项工作在整个董事会正确，你将不得不黑客的CSS一点。幸运的是，有一个IE bug对我们有利。在容器上设置top:50%，在内部分区上设置top:-50%，可以获得相同的结果。我们可以使用另一个IE不支持的特性将两者结合在一起：高级CSS选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>


 
    <p>
Works in everything!
</p>

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

该解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用了transform: translateY属性。(http://canius.com/feat=transforms2d)

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

1
2
3
position: relative;
top: 50%;
transform: translateY(-50%);
相关讨论

将您的div改为柔性容器：

1
div {display:flex;}

现在有两种方法可以使所有内容的路线居中：

方法1：

1
div {align-items:center;}

演示

方法2：

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

演示

在img上尝试不同的宽度和高度值，在span上尝试不同的字体大小值，您将看到它们始终保持在容器的中间。

相关讨论

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

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

接受的答案会使图标居中，大约是它旁边文本x高度的一半(如CSS规范中所定义)。这也许足够好，但是如果文本的上下部分恰好在顶部或底部突出，则可以稍微看远一点：

centered icon comparison

在左侧，文本没有对齐，在右侧，如上图所示。在本文中可以找到一个关于垂直对齐的实时演示。

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

vertical-align: middle和top的主要区别在于，第一个元素相对于方框的基线移动(放置在任何需要完成所有垂直对齐的位置，因此感觉相当不可预测)，第二个元素相对于方框的外部边界移动(更有形)。

相关讨论

接受答案中使用的技术仅适用于单行文本(演示)，而不是多行文本(演示)-如文中所述。

如果有人需要将多行文本垂直居中显示在图像上，可以使用以下几种方法(方法1和2灵感来自于这篇CSS技巧文章)

方法1:css tables(fiddle)(ie8+(caniuse))

CSS：

1
2
3
4
5
6
7
div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

方法2：容器上的伪元素(fiddle)(ie8+)

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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(小提琴)(犬用)

CSS(上面的小提琴包含供应商前缀)：

1
2
3
4
5
6
7
div {  
    display: flex;
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
相关讨论

此代码适用于IE和FF：

1
2
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
相关讨论

因为你必须把line-height设置到DIV的高度才能工作。

相关讨论

基本上，你必须了解CSS3。

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

对于记录，对齐"命令"不应该在跨度上工作，因为它是一个内嵌标记，而不是块级标记。像对齐、边距、填充等内容在内嵌标记上不起作用，因为内嵌点不会干扰文本流。

CSS将HTML标记分为两组：内联和块级。搜索"css block vs inline"，会出现一篇很棒的文章…

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

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

相关讨论

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

这真是最简单的方法。

相关讨论

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

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

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

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

HTML

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
background:url(../images/red_bullet.jpg) left 3px no-repeat;

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

相关讨论

编写这些跨度属性

1
2
3
4
span{
    display:inline-block;
    vertical-align:middle;
}

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

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

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

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

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

我同意，这可能会令人困惑。尝试使用表格功能。我使用这个简单的CSS技巧将模态定位在网页的中心。它具有强大的浏览器支持：

1
2
        <img src="..." alt="..." />
        <span>It works now</span>

CSS部分：

1
2
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

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

多行解决方案：

http://jsfiddle.net/zh58l/6/

1
2
3
4
5
6
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
   
      Multiline text centered vertically
   

<!-- note: img (height + 2x padding) must be equal to root div height -->

适用于所有浏览器和IE9+

首先，不推荐使用内联CSS，它会把HTML搞得一团糟。

为了对齐图像和跨度，您只需执行vertical-align:middle。

1
2
3
.align-middle {
  vertical-align: middle;
}
1
2
  <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>

相关讨论

你可能想要这个：

1
2
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>

如其他人所建议的，在图像上尝试vertical-align：

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

CSS并不烦人。你只是不看文件而已。P

相关讨论