Question

我有一个div，它的文本是右对齐的。我希望然后将div放在其父级中。

以下代码仅适用于右对齐。

CSS

.outerDiv {
    text-align: center;
    width: 100%;
}

.innerDiv {
    text-align: right;
    width: auto;
}

HTML

<div class="outerDiv">
    <div class="innerDiv">
        10<br/>
        <span style="border-bottom: 1px solid black">
            + 2
        </span><br />
        12
    </div>
</div>

我知道这可以在外部div中使用margin-left: auto; margin-right: auto来完成，但这需要您设置内部div的宽度，这是我事先不知道的。

想法？

Answer 1

由于您在父元素上设置了text-align: center，因此您只需将内部元素的display设置为inline-block即可。在这样做时，内部元素将水平居中，因为它基于其内容的宽度具有"shrink-to-fit" width：

.outerDiv {
  text-align: center;
}
.innerDiv {
  display: inline-block;
  text-align: right;
}
.innerDiv span {
  display: block;
  border-bottom: 1px solid black
}

<div class="outerDiv">
  <div class="innerDiv">
    10<span>+ 2</span>12
  </div>
</div>

我还删除了<br />元素，并将display元素的span更改为block。您也可以将其替换为p元素（因为默认情况下它已经是块级别）。

Answer 2

您可以使用<center> html标记：

<center>
    <div class="outerDiv">
        <div class="innerDiv">
            10<br/>
            <span style="border-bottom: 1px solid black">
                + 2
            </span><br />
            12
        </div>
   </div>
</center>

如何将右对齐的DIV居中？

2 个答案: