先頭からヘッダーの内側にdivを配置する方法

Question

ヘッダーには2つのdiv（左と右のdiv）があり、それらの前に4列のオフセットがあります。私がしたいのは、ヘッダーの中央に正しいdivを作ることです。それは私が50％をパディング試みたが、私が欲しいものとして動作しません、どのように見えるか

.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>

これ。

enter image description here

Answer 1

あなたがそれをしたい正確にどのようにわかりません。しかし、私が理解から、あなたはディスプレイを利用することができます：ここに曲がる

チェックこのスニペット

.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>

希望これは

に役立ちます