수직 방향의 배치, 나는 이미지와 텍스트의 수직 정렬을 중심으로 몇 게시 된 솔루션을 검토 한 결과 왼쪽

Question

텍스트와 부동 이미지를 중심으로하면서 그러나

(이와 같은 Vertically align text next to an image?를) , 나는 이미지를 왼쪽으로 고정시키고 텍스트를 수평으로 정렬하려고합니다. 꼬리말처럼 이미지가 왼쪽에 "고정"되고 탐색 (또는 면책 텍스트)이 수평으로 배치됩니다 (그리고 그것의 위치는 뷰포트의 크기에 따라 조정될 것입니다).

<div style="width:100%; text-align: center;"> 
     <img src="logo.png" alt="my logo" style="vertical-align:middle; float: left;" /> 
     <span>Copyright 2015 by Company, LLC. All Rights Reserved</span> 
    </div> 

이 추가 :

이

내가 지금까지 무엇을 가지고 "플로트 : 왼쪽;" "vertical-align : middle;"을 비활성화합니다. 그러나 float 속성을 제거하면 왼쪽에 로고를 고정하는 방법을 모르겠습니다.

어떻게하면이 아이디어를 얻을 수 있습니까? 그냥 간단한 대답을 찾고, 너무 복잡합니다.

감사합니다.

Answer 1

(적어도 크롬) 플로트와 함께 작동하는 것 같다 해결책

<div class="container"> 
    <img src="http://lorempixel.com/400/200/"/> 
    <div class="text">this is some text</div> 
</div> 

* { 
box-sizing: border-box; 
} 
.container { 
width: 100%; 
text-align: center; 
border: 1px solid red; 
display: table; 
} 

img { 
float: left; 
} 

.text { 
border: 1px solid blue; 
display: table-cell; 
vertical-align: middle; 
height: 100%; 
} 

바이올린 : http://jsfiddle.net/u7cjLL1f/

텍스트가 전체 상위 div를 차지하고 이미지 위로 이동하려는 경우 : http://jsfiddle.net/u7cjLL1f/1/

Answer 2

설정 폭에 대한 높이, 플로트 예를 사용하지 마십시오

<div style="width:100%; text-align: center;"> 
    <img src="logo.png" alt="my logo" style="width:200px; height:200px;vertical-align:middle;display:inline-block" /> 
    <span>Copyright 2015 by Company, LLC. All Rights Reserved</span> 
</div>