헤더에 세 개의 이미지를 정렬하는 데 어려움이 있습니다.

Question

헤더 div에 세 개의 이미지를 정렬하려고합니다. 한 번 왼쪽에 한 이미지 - 가운데에 한 번 -과 오른쪽 이미지가 필요합니다. 왼쪽에 이미지가 있고 가운데에 이미지가 있습니다. 그러나, 나는 중심 이미지의 오른쪽에 표시 할 권리가 필요한 이미지를 얻을 수 없습니다. 떠 다니는 경우 : 중심에 놓인 이미지를 떠난다면 여러 브라우저에서 내 중심의 이미지가 엉망이됩니다. 오른쪽에있는 이미지는 가운데에있는 이미지의 왼쪽에 표시됩니다. 중심 이미지의 오른쪽에 어떻게 표시합니까? 고맙습니다.

HTML :

<div class="header"> 

<div class="headerLeft"> 

<img src="salogo_lg.jpg" 
width="105" 
height="115" 
alt="Salvation Army Logo" /> 

</div> <!-- closing tag of headerLeft--> 

<div class="headerCenter"> 

<img src="logo85.jpg" 
width="485" 
height="93" 
alt="Salvation Army" /> 

</div> <!-- closing tag of headerCenter --> 

<div class="headerRight"> 

<img src="salogo_lg.jpg" 
width="105" 
height="115" 
alt="Salvation Army Logo" /> 

</div> <!-- closing tag of headerRight --> 


</div> <!-- closing tag of header --> 

CSS :

.header{ 
width: 100%; 
height: 115px; 
background-color: #0B0B3B; 
margin-bottom: -15px; 
} 

.headerLeft{ 
float: left; 
width: 105px; 
height: 115px; 
} 

.headerCenter{ 
display: inline-block; 
margin-left: auto; 
margin-right: auto; 
width: 485px; 
height: 93px; 
} 

.headerRight{ 
float: left; 
text-align: right; 
margin-left: 15px; 
width: 105px; 
height: 115px; 
} 

Answer 1

빠른 대답 :

* 
 
{ 
 
    box-sizing: border-box; 
 
} 
 

 
header 
 
{ 
 
    background: grey; 
 
    color: white; 
 
    padding: 1em; 
 
    position: relative; 
 
    height: 5em; 
 
    width: 100; 
 
} 
 

 
img 
 
{ 
 
    display: block; 
 
    height: 3em; 
 
    margin: auto; 
 
} 
 

 
img.right 
 
{ 
 
    position: absolute; 
 
    right: 1em; 
 
    top: 1em; 
 
} 
 

 
img.left 
 
{ 
 
    left: 1em; 
 
    position: absolute; 
 
    top: 1em; 
 
}

<header> 
 
    <img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" /> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" /> 
 
    <img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" /> 
 
</header>

여기

내 코드입니다 position: absolute;를 사용하지

Answer 2

, 내가 도와 calc를 사용하여, 나는 아래 가지고 .headerCenterWrapper에 .headerCenter 포장 권하고 싶습니다.

CSS :

.headerLeft { 
    width: 105px; 
    height: 115px; 
    display: inline-block; 
} 

.headerCenterWrapper { 
    width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */ 
    height: 115px; 
    display: inline-block; 
    text-align: center; 
} 

.headerCenter { 
    width: 50px; 
    height: 115px; 
    display: inline-block; 
} 

.headerRight { 
    width: 105px; 
    height: 115px; 
    display: inline-block; 
} 

그리고 HTML :

<header class="header"> 
    <img src="" alt="" class="headerLeft"/> 
    <div class="headerCenterWrapper"> 
    <img src="" alt="" class="headerCenter" /> 
    </div> 
    <img src="" alt="" class="headerRight" /> 
</header> 

Answer 3

CSS

.headerLeft{ 
float: left; 
width: 33.33%; 
height: 115px; 
} 

.headerCenter{ 
margin-left: auto; 
margin-right: auto; 
width: 33.33%; 
height: 115px; 
float:left; 
text-align:center; 
} 

.headerRight{ 
float: right; 
width: 33.33%; 
height: 115px; 
text-align:right; 
} 

HTML

<div class="header"> 

<div class="headerLeft"> 

<img src="manish.png" 
width="105" 
height="115" 
alt="Salvation Army Logo" /> 

</div> <!-- closing tag of headerLeft--> 

<div class="headerCenter"> 

<img src="manish.png" 
width="105" 
height="115" 
alt="Salvation Army" /> 

</div> <!-- closing tag of headerCenter --> 

<div class="headerRight"> 

<img src="manish.png" 
width="105" 
height="115" 
alt="Salvation Army Logo" /> 

</div> <!-- closing tag of headerRight --> 


</div>