How to align centers of two div

Question

I want to show a circle in webpage at some X and Y and then show title text just above the circle.

What I want is - Center of the text should match with center of circle vertically(Y).

Even when the length of text is increased at run-time, the text should still be centered.

Circle dia and text length are variable.

I tried to use text-align center, but could not achieve.

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;
}

hi, please share your current code so we can better understand what you are trying to achive — aMJay, Sep 11 '19 at 11:26
it's possible with flex-box , but share a picture to get more info — Alex, Sep 11 '19 at 11:29

Ilya Novojilov · Answer 1 · 2019-09-12T07:22:55.517

1

You should use display: flex; flex-direction: column; justify-content: center; for the wrapper element.

edited Sep 12 '19 at 07:22

answered Sep 11 '19 at 11:28

Ilya Novojilov

851
6
12

score 0 · Answer 2 · answered Sep 11 '19 at 11:37

Maybe this example can help you:

#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>

How to align centers of two div

2 Answers2