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

Question

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

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

Fiddle

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>元素absolute并将文本水平和垂直对齐，如下所示：

方法＃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：

按<span> / top / right / bottom属性展开绝对定位的left元素：

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

此方法具有更广泛的浏览器支持，但其中一个缺点是不的文本应为多行。