Question

我的ui中有一些按钮，必须在文本旁边放置图像，这样才能正常工作。但是，我在将图像垂直对齐到文本时遇到了问题。

我和vertical-align: center;一起试过多次尝试使用绝对定位，我甚至尝试了一些失败的变换技术。

现在这些按钮的内容来自用户，因此它是动态的，否则我会尝试使用行高进行操作并将其称为一天。

任何帮助都会很棒！

我的HTML看起来像这样。

<div class='btn-primary col-md-4'>
    <img  src='https://developers.google.com/web/fundamentals/imgs/placeholder--small.png'/ >
        <span class='imgInfo'>This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. </span>
        <p class='clearfix'></p>
</div>

并且css看起来像这样。

img{
    vertical-align: middle;
    float:left;
    width:50%;
}

.imgInfo{
    margin-left: 0px;
    overflow:auto;
    display:block;
    float:right;
    width:50%;
    padding-left:1em
}

和jsFiddle搭档http://jsfiddle.net/52VtD/7356/

Answer 1

<强> Demo

CSS

img{
    float:left;
    width:50%;;
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
}

（参考：Smashing Magazine）

解释

在研究规范和文档后，这就是Absolute Centering的工作方式：

在normal content flow 15中，margin: auto;等于'0'表示顶部和底部 W3.org 16：如果'margin-top'或'margin-bottom'为'auto'，则其使用值为0.
position: absolute;打破了典型内容流中的阻止，将剩余内容呈现为该块不存在。
Developer.mozilla.org 17：......绝对定位的元素从流中取出，因此不会占用空间
设置top: 0; left: 0; bottom: 0; right: 0;为浏览器提供了一个新的块边界框。此时，块将填充其偏移父级中的所有可用空间，该父级是正文或position: relative;容器。 Developer.mozilla.org 1918：对于绝对定位的元素，top，right，bottom和left属性指定元素包含块边缘的偏移量（元素相对于的位置）。
为阻止width或height阻止阻止占用所有可用空间并强制浏览器根据新的边界框计算margin: auto。 Developer.mozilla.org 1918：[绝对定位]元素的边距随后位于这些偏移内。
由于块是绝对定位的，因此不在正常流程中，因此浏览器会给margin-top和margin-bottom提供相等的值，并将元素置于先前设置的边界内。
W3.org 20：如果三个[top，bottom，height]都不是'auto'：如果'margin-top'和'margin-bottom'都是'auto'，那么在额外约束条件下求解方程式两个边距得到相等的值。 AKA：垂直居中

绝对居中似乎是基于规范的margin: auto;的预期用途，因此应该适用于每个符合标准的浏览器。

TL; DR：绝对定位的元素不会在正常流程中呈现，因此margin: auto;在top: 0; left: 0; bottom: 0; right: 0;设置的范围内垂直居中。

Answer 2

你可以使用 -

img{
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
}

top: 0;和bottom: 0;会阻止彼此触及边缘。
margin: auto;会正确地将img与中心对齐。

工作FIDDLE

Answer 3

我建议您使用

.img {
  margin-top:40%
}

而不是vertical-align。

垂直居中浮动图像

3 个答案:

解释