How to align contents in the middle in div class row?

Question

i was wondering if anyone can assist in what it should have been a straight forward issue to fix when it comes to aligning the text ("CONSOL Overview") in the middle instead of left in the title box below.

I have tried "align-content: center" and also "text-align: center" but that doesn't seem to be working.

Any help apprecieated

my html page looks like this:

and the part in the html code is this:

<div class="container-fluid" style="padding-top: 15px;">
    <div class="row" 
         style="height: 50px;padding-top: 15px; background: #36304a; align-content: center; color: white; font-weight: bold; border-radius: 10px">
        <h3>CONSOL Overview</h3>
    </div>
</div>

Actually there more elements below my title but i guess those aren't needed to be shown here.

score 9 · Answer 1 · edited Mar 06 '21 at 16:05

9

If you are using Bootstrap 4 or newer, then the row class is display: flex by default, which means <div class="row justify-content-center"> should place every item in your div horizontally center. If you want to it horizontally and vertically center then use <div class="row justify-content-center align-items-center">

The other way is, if your containers height is set, then simply make your text's line-height equal with it and it will be in center. (works only if the text is only in one row)

edited Mar 06 '21 at 16:05

Ihtisham Khan

417
5
20

answered Oct 19 '18 at 17:15

Patrik Alexits

987
9
24

thanks I will test it, i am using – SNicolaou Oct 19 '18 at 17:18
1

makes it horizontally center – Ihtisham Khan Mar 05 '21 at 12:05

score 3 · Answer 2 · answered Oct 19 '18 at 17:18

3

I think you are using Bootstrap and there is a really easy way to align elements in the center using mx-auto like <div class="mx-auto"> or <h3 class="mx-auto">. :)

answered Oct 19 '18 at 17:18

Vipul Sharma

525
9
23

thanks I will test it, i am using – SNicolaou Oct 19 '18 at 17:20
Yes catch up with the results! This link does not seem to work! – Vipul Sharma Oct 19 '18 at 17:22
There's no need for that. If he wants the h3 to be vertically centered, then a simple text-align: center; would be enough on the div. mx-auto is not needed on any of the classes. If he is using bootstrap then there is the "text-center" class which will place the text vertically center. The row's align-items-center class will place it horizontally centered. – Patrik Alexits Oct 19 '18 at 17:24
I agree @PatrikAlexits, but since bootstrap gives us a simple class for that why go to css for that buddy? – Vipul Sharma Oct 19 '18 at 17:25
There is no need for css, that's why I wrote the "text-center" class on the div. That will place the
vertically center since it's a text within a div. The "align-item-center" will place it horizontally centered within a div.
– Patrik Alexits Oct 19 '18 at 17:28
Yes I guess there is no need for this man! Both the answers do the work! @SNicolaou may use the way they prefer! – Vipul Sharma Oct 19 '18 at 17:29
so far I have tested
CONSOL Overview
and it works – SNicolaou Oct 19 '18 at 17:31
and
also works so thank you both.
– SNicolaou Oct 19 '18 at 17:36
1

Welcome! @SNicolaou ! Glad it works! Please accept the answer if you are satisfied! – Vipul Sharma Oct 19 '18 at 17:37
Okay I see it now, I haven't noticed that you wrote "center instead of left side". My bad sorry :) – Patrik Alexits Oct 19 '18 at 17:39
Adding ```mx-auto``` to the class worked perfectly! – swagless_monk Oct 13 '20 at 03:09

score 0 · Answer 3 · answered Oct 19 '18 at 17:44

0

Hi Here is solution to your problem

    h3{
display: inline-block;
    margin: 0 auto;
}

Working fiddle

answered Oct 19 '18 at 17:44

Liaqat Saeed

428
5
17

How to align contents in the middle in div class row?

3 Answers3

vertically center since it's a text within a div. The "align-item-center" will place it horizontally centered within a div.

CONSOL Overview