Question

DIV“中央”居中，好吧！，很好！但是：为什么没有？请帮忙。

由于

$result = preg_split('~\s*(?=A[0-9]{6})~', $str, -1, PREG_SPLIT_NO_EMTPY);

是的，我需要左边的“徽标”，模式为“浮动”。真的，一切都是“完美的”，但“HERE INFO CENTERED”的文字是狡猾的...

为什么？我怎么能把这个中心化？

Answer 1

考虑到浮动后，您的文本位于剩余空间的中心。见this enhanced demo。

.logo {
    ...
    background: #ddd;
}

一种可能的解决方案是在徽标上设置一个与其宽度相匹配的负边距，从而取消其尺寸：

.logo {
    ...
    width:400px;
    margin-right: -400px;
}

<强> Demo

Answer 2

正如伊舍伍德的回答，这是因为之前的浮动元素。

我找到了两个简单的解决办法：

一个是通过在徽标

之后添加换行符来修改html标记

<body>
  <div class="logo">ABCDEFGHIJKLMNÑOPQRST</div>
  <br>
  <div id="todo">
    <div class="central">
      HERE INFO CENTERED
    </div>
  </div>
</body>

其他方法是将display:inline-block;设置为.central div。

.central{
  text-align:center;
  background:#4d9999;
  border:1px solid #000;
  width:90%;
  margin:auto;
  display:inline-block;
}

另一种方法是，当您的.logo具有静态宽度时，添加一个等于其宽度的负边距。

.logo{
  width:400px;
  float:left;
  color:#000;
  margin-right:-400px;
}

我的框中心文本如何“中央”？

2 个答案: