相对于包装器 div 在图像附近居中跨度

Question

如何在不使用表格的情况下将 span 元素垂直和水平居中？

我需要左边的图片，然后在包装器div 的中心对齐跨度。 span 元素不应在img 和右侧之间对齐，而是整个div 本身。

Fiddle

<div style="height: 100px; background-color:black;color:white;">
  <img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg">
  <span class="hejsa">hej du</span>
</div>

Answer 1

试试这个

css

div{text-align:center;line-height:100px;position:relative;}
img{position:absolute;left:0}

html

<div style="height: 100px; background-color:black;color:white;"><img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg"><span class="hejsa">hej du</span></div>

fiddle

Answer 2

正如 OP 所说：

我需要以整个站点为中心的跨度。

一种选择可能是定位<span> 元素absolutely 并将文本水平和垂直对齐到中心，如下所示：

方法#1：

使用top/left 和transform 属性：

.wrapper {
    position: relative;
    height: 100px; background-color:black; color:white;
}

.wrapper > span.hejsa {
    position: absolute;
    top: 50%; left: 50%;
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<div class="wrapper">
    <img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" />
    <span class="hejsa">
        Lorem ipsum dolor sit amet...
    </span>
</div>

值得注意的是CSS transform 是not supported in IE8 and olders ^{（这不是他/她在comments 中提到的OP 的关注点）}

方法#2：

通过top/right/bottom/left属性扩展绝对定位的<span>元素：

.wrapper {
    position: relative;
    height: 100px; background-color:black; color:white;
}

/* .wrapper > img { position: relative; z-index: 1; } */ /* optional */

.wrapper > span.hejsa {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    line-height: 100px;
    text-align: center;
}

<div class="wrapper">
    <img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" />
    <span class="hejsa">
        Lorem ipsum dolor sit amet...
    </span>
</div>

这种方法有更广泛的浏览器支持，但是它的一个缺点是文本应该不是多行的。