Question

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

例如，在这个小提琴中，我希望Google徽标居中。

<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的背景图像并根据需要更改背景大小来轻松使徽标居中：

.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

Answer 2

我会这样做：

.box .image {
    height: 160px;
    width: 100%;
    background-color:#ff1769;
    background-position:center center; 
}

将图像添加为背景图像。

http://jsfiddle.net/g2u4E/5/

Answer 3

<style>
.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;
margin:auto;
}

.box .image img{
height: 100%;
width: 100%;
}
</style>

Answer 4

fixed或%宽度的div可以通过应用

与其父容器的中心对齐

margin:0 auto;

例如：

#divToCenter{
  height: 160px;
  width: 400px;
  margin:0 auto;
}

将百分比宽度div内的固定宽度div居中

4 个答案: