how to center a div inside the header from the top

Question

I have a header it contains two divs [ left div and right div ] and offset 4-cols before them . What i want is to make the right div at the middle of the header .

 .header { background-color: #FFF; padding: 15px; } .header .left img { width: 90%; } .header .right > div { display: inline-block; } .header .right span { color: #0095AE } .header .right > span:first-child { font-size: 22px; } .header .right > div p { font-weight: bold; font-size: 13px; margin:0; padding: 0; color: #0095AE } .header .right > div p:first-child { text-align: right }

 <div class="header"> <div class="row"> <div class="col-md-4 col-md-offset-4 "> <div class="left"> <img class ="logo" src="images/logo.png"> </div> </div> <div class="col-md-4 "> <div class="right"> <span>By</span> <img src="images/crescent.png" > <div> <p> الهلال الأحمر الأردني </p> <p> JORDAN RED CRESCENT </p> </div> </div> </div> </div> </div>

This how it looks , I tried padding 50% but doesn't work as what i want.

enter image description here

Answer 1

Not sure how exactly you want it. But from what i understand ,you can make use of display:flex here

check this snippet

 .header { background-color: #FFF; padding: 15px; } .row { display: flex; justify-content: center; } .col-md-4 { display: flex; } .col-md-4:last-child {}

 <div class="header"> <div class="row"> <div class="col-md-4 col-md-offset-4 "> <div class="left"> <img class="logo" src="images/logo.png"> </div> </div> <div class="col-md-4 "> <div class="right"> <span>By</span> <img src="images/crescent.png"> <div> <p>الهلال الأحمر الأردني</p> <p>JORDAN RED CRESCENT</p> </div> </div> </div> </div> </div>

Hope this helps