float: left, 保留其他元素 text-align: center

Posted 2023-03-05

【中文标题】float: left, 保留其他元素 text-align: center

【英文标题】：float: left, keep other element text-align: center

【发布时间】：2015-07-16 23:24:09

【问题描述】：

前段时间我问了一个关于how to align some content on the left, some content in the middle, but keep them vertically aligned的问题。

通过我在那里收到的答案和一些进一步的搜索，我想出了两个几乎完美的解决方案。但我想知道是否有某种方法可以将它们组合成一个满足我所有要求的解决方案。

这些要求是：

没有对宽度或高度进行硬编码 一些内容左对齐，一些内容居中对齐 左对齐和居中对齐的内容彼此垂直对齐 左对齐和居中对齐的内容都遵循父级（或父级的父级）中的填充 没有不必要的滚动 居中对齐的内容不得与左对齐的内容重叠（解决方案 #1 不满足） 居中对齐的内容必须真正居中（解决方案 #2 不满足） 兼容 IE 8 编辑：如果居中的内容很宽，它必须用完所有可用空间（即直到碰到左对齐的内容）

在这些要求中，重叠的内容是我最愿意忍受的，因为只有将窗口做得更小才会发生这种情况。

解决方案 #1 - 使用 position: absolute; left: 0，✓ 真正居中，✗ 没有重叠

.nav-btn-set-left 
    position: absolute;
    left: 0;
    height: 100%;
    border: 1px solid green;


.title-bar 
    padding: 5px 10px;
    text-align: center;
    border: 1px solid black;
    background-color: lightblue;
    font-size: 50px;


.nav-btn-set-parent 
    border: 1px solid orange;
    position: relative;


.nav-btn 
    vertical-align: middle;

<div class="title-bar">
    <div class="nav-btn-set-parent">
        <div class="nav-btn-set-left">
            <input type="button" value="Button1" class="nav-btn"/>
            <input type="button" value="Button2" class="nav-btn"/>
        </div>
        Heading
    </div>
</div>

解决方案 #2 - 使用 float: left;，✗ 真正居中，✓ 没有重叠

.nav-btn-set-left 
    float: left;
    height: 100%;
    border: 1px solid green;


.title-bar 
    padding: 5px 10px;
    text-align: center;
    border: 1px solid black;
    background-color: lightblue;
    font-size: 50px;


.nav-btn-set-parent 
    border: 1px solid orange;
    position: relative;


.nav-btn 
    vertical-align: middle;

<div class="title-bar">
    <div class="nav-btn-set-parent">
        <div class="nav-btn-set-left">
            <input type="button" value="Button1" class="nav-btn"/>
            <input type="button" value="Button2" class="nav-btn"/>
        </div>
        Heading
    </div>
</div>

谁能找到一种方法来统一这两种方法来满足所有要求？或者没有更新的 CSS 是不可能的？如果你有一个新的 CSS 解决方案，比如 flex-box，但不适用于旧版浏览器，那仍然值得发布。

【问题讨论】：

可以调整标记吗？

是的，调整标记没问题。无论如何，CSS 和 html 总是在一定程度上交织在一起。

【参考方案1】：

如果可以稍微调整标记，请继续阅读。

http://jsfiddle.net/2gddfxbo/

.nav-btn-set-parent 
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

.table-cell 
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    padding: 20px 0;

.heading-cell 
    text-align: center;

<div class="title-bar">
    <div class="nav-btn-set-parent">
        <div class="table-cell nav-btn-set-left">
            <input type="button" value="Button1" class="nav-btn"/>
            <input type="button" value="Button2" class="nav-btn"/>
        </div>
        <div class="table-cell heading-cell">Heading</div>
        <div class="table-cell"></div>
    </div>
</div>

如果需要，也可以添加：

.heading-cell 
    text-align: center;
    width: 50%; /*adjustable*/

【讨论】：

我喜欢你用它去的地方，但它有一个小问题，因为标题文本一旦溢出中心表格单元格就会换行，即使有很多 div 有空白空间.将“标题”更改为更长的内容以了解我的意思。我想我应该将其添加为要求。

@ChrisMiddleton 你有没有看到答案底部的更新部分，快速演示 - jsfiddle.net/2gddfxbo/1 除此之外，纯 css 真的很难，看起来你想要左边的框脱离内容流，并在必要时将其放回去，媒体查询会有所帮助吗？但你仍然必须定义一个断点。