how to center a div inside the header from the top - html

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