왼쪽 맞춤 텍스트를 오른쪽 맞춤 이미지로 세로 맞춤

Question

액체 레이아웃 모바일 웹 사이트를 디자인하고 있습니다. 헤더로서 나는 로고가 들어있는 "text-align : right;"가있는 중심 div가 있습니다. 그런 다음 다른 div가 "float : left;"로 설정됩니다. 여기에는 내 사이트 제목이 포함되어 있습니다.

텍스트를 로고에 세로로 정렬하고 텍스트를 왼쪽으로 정렬하고 로고를 오른쪽으로 정렬하려면 어떻게해야합니까? 관련 비트

박탈 코드 :

<div id="wrapper"> 

<div id="title"> 
    <h3>My title</h3> 
</div><!--end title--> 

<div id="logo"> 
    <img src="images/logo.jpg" alt="Logo" class="logo" /> 
</div><!--end logo--> 

CSS : 사전에

html, body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
} 
img.logo{ 
    width: 96px; 
    height: 41px; 

} 

#wrapper{ 
    min-height: 100%; 
} 

#title{ 
    float: left; 
    padding: 0.5em 0 0.5em 10%; 
} 

#logo{ 
    width: 90%; 
    margin: 0 auto; 
    text-align: right; 
    padding: 0.5em; 
} 

많은 감사합니다!

Answer 1

당신과 같이 text-align: justify를 사용할 수 있습니다

div { 
 
    text-align: justify; 
 
    line-height: 100px; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 

 
img, span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<div> 
 
    <span>test</span> 
 
    <img src=http://placehold.it/100x50> 
 
</div>

이

Demo on Codepen