Question

我想在网页的X和Y处显示一个圆圈，然后在圆圈上方显示标题文本。

我想要的是-文本的中心应与垂直圆的中心（Y）匹配。

即使在运行时增加文本的长度，文本也应居中。

圆直径和文本长度是可变的。

我尝试使用text-align center，但无法实现。

html-

<div id="par">
    <div id="txt">Some Text</div>
    <div id="circ"></div>
</div>

css-

#par{
    text-align: center;
}

#txt{
    background-color: red;
}

#circ {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: green;
}

Answer 1

对于包装元素，应使用display: flex; flex-direction: column; justify-content: center;。

Answer 2

也许这个例子可以帮助您：

#par{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
}

#txt{
    display: inline-block;
    text-align: center;
    background-color: red;
}

#circ {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: green;
}

<div id="par">
    <div id="txt">Some Text</div>
    <div id="circ"></div>
</div>

<br>
<br>

<div id="par">
    <div id="txt">Some Text Some Text Some Text Some Text Some Text</div>
    <div id="circ"></div>
</div>

如何对齐两个div的中心

2 个答案: