CSS and vertical alignment with flexbox: it won't ever align

Question

I can't manage to get my text to vertical align to the center of a div. I tried so simplify the problem as much as I could but it still doesn't work.

I tried with display:table but I need flexbox so that my columns are the right width and it didn't work either anyway. Removing elements one by one didn't bring me to the answer...

Edit: there is no span so it's not a problem of the last element being inline.

.row {
    display: flex;
      align-items: center;
    margin-left: 44px;
    margin-right: 44px;
      margin-top: 10px;
}

.column_left {
    flex: 28%;
}

.column_right {
    flex: 72%;
}

.group_title {
    color: #000000;
    font-family: "Noto Serif";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
}

.group_description {
    width: 408px;
    color: #000000;
    font-family: "Noto Serif";
    font-size: 15px;
    letter-spacing: 0;
}

.exercise_list {
    height: 70px;
    background: #FFEFD5;
}

<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Les présentations</div>
        <div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
    </div>
</div>
<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Poser des questions pour faire connaissance</div>
        <div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
    </div>
</div>

Edit: Removing the parent div to give both classes row and exercise_list to the child almost work, but I lose the margin to the left and the text is too close to the edge of the rectangle.

Unfortunately no. The problem in this question was that he used an inline instead of a block — Léo Zangelmi, Sep 01 '22 at 11:34

HamiD · Accepted Answer · 2022-09-01T11:36:56.250

2

Take a look in the code:

.row {
    display: flex;
    align-items: space-arround;
  width:100%;
}

.column_left {
  padding-left:44px;
  flex:1;
}

.column_right {
  flex:2;
}

.group_title {
    color: #000000;
    font-family: "Noto Serif";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
}

.group_description {
    width: 408px;
    color: #000000;
    font-family: "Noto Serif";
    font-size: 15px;
    letter-spacing: 0;
}

.exercise_list {
    height: 70px;
    background: #FFEFD5;
  width:100%;
  display:flex;
  align-items:center;
}

<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Les présentations</div>
        <div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
    </div>
</div>
<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Poser des questions pour faire connaissance</div>
        <div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
    </div>
</div>

add display:flex; to your .exercise_list elements

edited Sep 01 '22 at 11:36

answered Sep 01 '22 at 11:23

HamiD

1,075
1
6
22

That way the columns won't align properly anymore. – Léo Zangelmi Sep 01 '22 at 11:29
@LéoZangelmi: I edited your code! – HamiD Sep 01 '22 at 11:37
That's better! But there's still an issue: if you add "margin-top: 10px" to .exercise_list, you can see it's not perfectly vertically aligned. – Léo Zangelmi Sep 01 '22 at 11:41
1

add align-items:center; to .row elements – HamiD Sep 01 '22 at 11:49
Indeed, from your solution I just need to add align-items:center; – Léo Zangelmi Sep 01 '22 at 11:51
Thank you! Can you explain the mistake I was doing? – Léo Zangelmi Sep 01 '22 at 11:51
your welcome. I just tried different things, but you can compair your code with mine ;) – HamiD Sep 01 '22 at 11:53
Yeah, I tried different things for almost an hour too, but I didn't find the solution. I'll give a very close look, thank you very much! :D – Léo Zangelmi Sep 01 '22 at 11:54

score 1 · Answer 2 · answered Sep 01 '22 at 11:23

1

Try adding display: flex to .exercise_list. It should be the containing element that dictates child element alignment.

The margin on .row is confusing the spacing too so I would remove margin-top: 10px from .row and add that to .exercise_list.

answered Sep 01 '22 at 11:23

user115014

922
14
23

Doing this almost works. Also if I remove the parent div and give the row div the exercise_list class too, it's vertically aligned, but I lose the margin to the left and the rectangle is cut very near to the edge of the text. – Léo Zangelmi Sep 01 '22 at 11:43

CSS and vertical alignment with flexbox: it won't ever align

2 Answers2