Question

我在div

中有div个

<div id="out" align="center">
      <div id="in1" align="left">111</div>
      <div id="in2" align="left">aaaaaaaaaaaaaaaaaaaaaa</div>
      <div id="in3" align="left">bbbb</div>
      <div id="in4" align="left">6516519191</div>
      <div id="in5" align="left">apple</div>
      <div id="in6" align="left">ii</div>
</div>

预期结果是div，其中size =（div内部的最大值）居中。然后它内部的项目全部对齐：

                         111
                         aaaaaaaaaaaaaaaaaaaaaa
                         bbbb
                         6516519191
                         apple
                         ii

我不想将width提供给外部div，因为我不知道之前的项目大小。

有什么办法吗？

Answer 1

您可以插入另一个（外部）容器div。

外部div容器：宽度100％并且居中文本对齐;
内部div容器：内联块和左文本对齐

CSS

#outerContainer {
    width: 100%;
    text-align: center;
}

#innerContainer {
    display: inline-block;
    text-align: left;
}

HTML

<div id="outerContainer">
    <div id="innerContainer">
        <div id="in1">111</div>
        <div id="in2">aaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
</div>

运行演示：http://jsfiddle.net/nvMmx/

Answer 2

首先，div没有“align”属性。

您提供的信息类似于表格数据。在这种情况下，应该使用一个表，而不是div。

Answer 3

设置外部width:100%; 或者定义内部宽度，否则

CSS

.abc{
float:left;
width:100%;
}

HTML

<div id="out" align="center">
      <div id="in1" class="abc">111</div>
      <div id="in2" class="abc">aaaaaaaaaaaaaaaaaaaaaa</div>
      <div id="in3" class="abc">bbbb</div>
      <div id="in4" class="abc">6516519191</div>
      <div id="in5" class="abc">apple</div>
      <div id="in6" class="abc">ii</div>
</div>

div对齐中心然后离开而不使用宽度

3 个答案:

CSS

HTML