html - 在百分比宽度 div 内居中固定宽度的 div

Question

如何在百分比宽度的 div 中水平居中固定宽度的 div？

例如，在这个 fiddle 中，我希望 Google Logo 居中。

<div class="box">
    <div class="image">
      <img src="http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png" />
    </div>
    <div class="text">Hello</div>
</div>

.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}

.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
}

http://jsfiddle.net/FloatLeft/g2u4E/

我在网上查看了各种“解决方案”，但没有找到任何有效的方法。

Answer 1

您可以通过为 div 设置背景图像并根据需要更改背景大小来轻松地将 Logo 居中:

.box .image {
   height: 160px;
   width:400px;
   background-color:#ff1769;
   background-image: url('http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png');
   background-size:47% 100%;
}

参见 FIDDLE