Question

这是一个适合所有人的CSS难题。

我在我的布局中使用了flexbox。我有一个标题，左侧有几个按钮，中间有一些文字，右边有另一个按钮。这是一个ascii绘图：

[btn][btn2][btn3][ text ][btn4]

不幸的是，这看起来很奇怪，因为文本不在标题中居中。 我真正想要的是：

[btn][btn2][btn3][ text ][btn4]

理想情况下，我希望继续使用flexbox来实现这一目标，因为它使大部分水平布局变得非常简单，但是如果需要的话，我愿意回归浮动和/或定位。 / p>

绝对定位文本元素的一个问题是长文本将在侧面的按钮下/重叠。我目前使用文字溢出：省略号和奖金，如果可能，我很乐意继续使用：

[btn][btn2][btn3][ long text causes elli... ][btn4]

如果有帮助，我还可以添加额外的容器元素。或许可以通过在容器中添加左按钮和右按钮来解决这个问题，然后确保这些容器的宽度始终相同？

修改：我认为我在this CodePen朝着正确的方向迈出了一步。它恰当地使文本居中。唯一的缺点是h1需要固定宽度或百分比宽度，如果宽度比可用空间宽，它似乎只是与相邻元素重叠。

Answer 1

你非常接近一个工作样本。我给你的CodePen分叉了一个不需要任何宽度的解决方案。它使用flex的力量来定位元素。

H1将始终位于中间，其宽度与周围left-btns和right-btns相同，使用flex: 1; 当然，您可以将H1指定为固定宽度，或者将其设为flex: 2;，使其占用50％的空间而不是33％。

Here's the fork on CodePen.我删除了不必要的代码。

代码：

<强> HTML

<div class="wrapper">
    <div class="left-btns">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>center me! center me! center me! test woah asdf veasdf veasdf veasdf veasdf ve</h1>
    <div class="right-btns">
        <div class="box"></div>
    </div>
</div>
<h1>center me!</h1>

<强> CSS

.wrapper {
    background: green;
    display: flex;
    margin: 5px;
}

h1 {
    flex: 1;
    text-align: center;
    margin: 5px;
    background: yellow;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: noWrap;
}

.box {
    width: 50px;
    height: 50px;
    margin: 1px;
    background: red;
}

.left-btns,
.right-btns {
    margin: 5px;
    display: flex;
    flex: 1;
    background: blue;
}

.right-btns {
    justify-content: flex-end;
}

使用flexbox，在文本中水平居中，文本两侧都有浮动？

1 个答案: