Question

这个问题基于这个答案：https://stackoverflow.com/a/23876839/994141

我读了很多关于这个主题的帖子，在我看来最好的答案是因为我想避免设置width。但是中心的内容并没有很好地集中，而是基于左侧和右侧的内容 证明： https://jsfiddle.net/p7kfuont/（＆＃39; b＆＃39;不在第一行的中心位置）

有没有办法在不设置inline-block的情况下改进此代码（float和width）？

Answer 1

这是你想要实现的目标吗？

＆＃13;

.container {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}
.container > div {
    display: table-cell;
    border: 1px solid red;
}

＆＃13;

<div class="container">
    <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="center">b</div>
    <div class="right">c</div>
</div>
<div class="container">
    <div class="left">a</div>
    <div class="center">b</div>
    <div class="right">c</div>
</div>

＆＃13;

Answer 2

如果您希望b严格位于中间，可以添加：

Foo

fooDef会将元素的中心设置在中心，如果没有它，则元素的左边缘将位于中心。

jsFiddle

Divs＆＃39; left / center / right＆＃39; - 如何在没有＆＃39;宽度的情况下完美居中？

2 个答案: