How to align elements vertically center in header with flex

Question

In my site header, I have 3 divs. For a logo, for search input and for a cart link. I want to align these 3 .col-md-4 divs vertically centered.

The divs have an align-items-center class, but it's not doing what I want, the divs arent centered vertically.

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
                <a href="#" title="" class=""><img src="images/assets/logo.png" alt="" class="img-fluid"</a></a>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Keresés</button>
                  </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
                <a href="#" title="" class=""><b>Kosár</b></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

I attach a photo of that how is the header looking now. The header has a grey border at its bottom.

delete mb-3. and use align-items:center; – Anish Sharma Aug 02 '19 at 10:11 — Anish Sharma, Aug 02 '19 at 10:11

score 1 · Accepted Answer · answered Aug 02 '19 at 10:14

align-items: center; is not enough to center vertically because you don't have the height defined. In other words, you have to define the header height as 100% of the page, if you want it to be centered vertically. See the example bellow:

 body{
  height: 100vh;
 }

 .header{
  height:100%;
 }

 .container{
  height: 100%;
 }

 .row{
  height: 100%;
  display:flex;
  align-items: center;
 }

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
                <a href="#" title="" class=""><img src="images/assets/logo.png" alt="" class="img-fluid"</a></a>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Keresés</button>
                  </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
                <a href="#" title="" class=""><b>Kosár</b></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Aug 02 '19 at 09:57

0

simple add to your flex container:

.row{
align-items: center;
}

Better if you find a more specific class (like add classname center and target .row.center)

answered Aug 02 '19 at 09:57

red

1,529
1
12
33

Sorry, thats now working. I also added a display:flex to that row, but still the same. – max777 Aug 02 '19 at 10:01
can you post your css and I'll try to fix that – red Aug 02 '19 at 10:06
Well, i dont have any css for these divs, only just the bootstrap classes. – max777 Aug 02 '19 at 10:08

score 0 · Answer 3 · answered Aug 02 '19 at 10:18

0

your code is correct, the problem is that the row height is based on the tallest child element (logo div for example) so you need to set the row height and the elements will align . Codepen

.header .container .row { 
  height : 200px;
  background-color : grey;
}

answered Aug 02 '19 at 10:18

B.F.playz

21
2

I cant add a fix hegit. That wouldnt be responsive. – max777 Aug 02 '19 at 11:31
you can add a virtual value like height : 20vh, or read about media queries for a responsive layout – B.F.playz Aug 04 '19 at 15:05

How to align elements vertically center in header with flex

3 Answers3