Question

|-------------------A-------------------|
|                                       |
|        |---B--| |-C-| |------D----|   |
|                                       |
|                                       |
|                                       |
|                                       |
|---------------------------------------|

您好，

我有一个CSS问题。我的页面有一个标题区域，它有一个图像背景（A），在它上面有三个浮动div（B-D）。背景比页面的实际宽度宽，这就是为什么我选择将它作为div（在较低的z-index中）为自己而不是作为容器div的背景图像。

我做了一个JSFiddle来演示：http://jsfiddle.net/7Lxgk44z/

为了更好的演示，我添加了背景颜色。

我的问题是B和D具有可变的文本长度，页面宽度本身也很灵活（适应较小的屏幕尺寸）但在桌面上我需要C与A完全水平居中。我怎么能实现这个目标？

为清楚起见：对于较小的屏幕尺寸（即平板电脑或手机），我开始隐藏B和D，具体取决于所使用的设备。

由于

Answer 1

您可以将父级与center对齐，并设置为子级display: inline-block，而不是float。

#BCD {text-align: center}
#B, #C, #D {display: inline-block}

http://jsfiddle.net/7Lxgk44z/2/

Answer 2

有你的解决方案：

jsfiddle.net/0c928ho6/1

#A { z-index: 1; height: 300px; min-width: 980px; max-width: 1280px; width: 100%; overflow:hidden; position: absolute; top: 0; display: block; margin: 0 auto; background-color: red; }

#BCD { text-align: center; z-index: 3; width: 980px; height: 250px; position: relative; display: block; margin: 0 auto; background-color: gray;}

#B { display: inline-block; height: 30px; padding: 10px; background-color: orange; }
#C { display: inline-block; width: 250px; height: 150px; margin: 0 10px; padding-top: 10px; background-color: green; }
#D { display: inline-block; height: 30px; padding: 10px; background-color: yellow; } 

.bdcouter {
    display: inline-block;
    margin-left: 60px;}

<div id="A">
    <div id="BCD">
        <div class="bdcouter">
            <div id="B">Lorem ipsum dolor</div>
            <div id="C">[IMAGE]</div>
            <div id="D">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        </div> 
    </div>
</div>

您可以.bdouter删除并将他的CSS参数添加到#BCD。但我认为这更好。

Answer 3

我建议

将float: left添加到左侧块
将float: right添加到右侧块
将display: inline-block添加到中心区块
将text-align: center添加到包装器

http://jsfiddle.net/7xpg45rp/

并注意：不要以这种方式使用position absolute。更好的方法是创建底部块，它将是红色的。并使用position: absolute作为底部块

Answer 4

查看this fiddle.它使C div始终在中心对齐，其他块根据您的请求与其对齐。

 #A {
   z-index: 1;
   height: 300px;
   min-width: 980px;
   max-width: 1280px;
   width: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
   display: block;
   margin: 0 auto;
   background-color: red;
 }
 #BCD {
   z-index: 3;
   width: 980px;
   height: 250px;
   position: relative;
   display: block;
   margin: 0 auto;
   background-color: gray;
 }
 #B {
   position: absolute;
   right: 50%;
   margin-right: 135px;
   height: 30px;
   padding: 10px;
   background-color: orange;
 }
 #C {
   position: absolute;
   width: 250px;
   height: 150px;
   margin-left: -125px;
   left: 50%;
   background-color: green;
 }
 #D {
   position: absolute;
   height: 30px;
   left: 50%;
   margin-left: 135px;
   padding: 10px;
   background-color: yellow;
 }

三个浮动的div以中间的为中心

4 个答案: