Question

无法居中div尝试浮动它并使用text-align:center; margin:auto无效请帮助我，我无法弄明白。我将粘贴代码和jfiddle的链接。

在Jfiddle看起来不错，但实际上并不是我不知道为什么。我正在使用Chrome Fiddle

<div class="wrap">
   <div class="top_portion">
       <div class="logo">
          <img src="img/2a685fsaq.png"/>
       </div>
   </div>
   <div class="center">
       <div class="cleft_portion">
          <img src="img/5.png" />
       </div>
       <div class="mid_portion">
         <img src="img/css.png"  />
       </div>
       <div class="cright_portion">
       </div>
   </div>
   <div class="bottom_portion">
   </div>
</div>

Answer 1

我认为我在Can't get right portion of middle to stay on the right的这个问题中给出了相同的解决方案...考虑到你的标记display:table是一个更好的选择（如果你可以忽略IE8 - ）

display:table与最小css兼容（ IE8 + ）

请参阅 demo here

<强> HTML

 <div class="center" style="display:table">
        <div class="cleft_portion" style="display:table-cell">

        </div>

        <div class="mid_portion" style="display:table-cell">

        </div>

        <div class="cright_portion" style="display:table-cell">

        </div>
    </div>

我删除了float并添加了table显示...如果您正在寻找IE8 +浏览器，它会更好!!

修改

考虑到您当前的标记，这些可能是错误

.center { margin: 0 auto; /* u have mentioned only auto here */ width:1200px; }

并将其添加到您的CSS之上：

html, body { width:100%; height:100%; }

working demo

Answer 2

使宽度为100％

转到你要居中的那个div并写下：

width:100%

或者使用宽度来播放它以使其自身居中

保留text-align：center和margin：auto;

如果它仍然没有居中，你可以随时使用margin-right / left，只要它在边距之下：0 auto;

如果你打算做最好的漂浮还有：

overflow:hidden;

并以高度玩，以免重叠

Answer 3

text-align:center无效，因为您在代码中使用图片。

如果你想使用margin:0 auto，你必须给你想要位于中心的容器一个宽度，因为容器默认采用容器的宽度并且margin:0 auto应用了cant被人看见。

无法居中div尝试浮动到左侧文本对齐边距：auto只是不工作

3 个答案: