이미지 및 텍스트 인라인으로 div 만들기

Question

도움이 필요합니다. 나는 도처에서 수색을 해왔고, 나는 아무 것도 발견하지 못했다. 이것이 제가이 질문을하는 이유입니다. 나는 다음과 같이 텍스트와 이미지 사업부는 다른 사업부와 인라인이되도록 만들려고 노력하고 있어요 :

이미지와 텍스트 하나 개의 사업부에 모두에서. 어떻게 이뤄지나요?

Answer 1

div를 display: inline-block 또는 float: left 스타일로 지정하십시오. 플로트를 지울 필요가 없으므로 우선은 display: inline-block이 될 것입니다.

Answer 2

당신은 블랙 박스가 외부 <div>와 내부 두 상자는 다음과 같은 CSS 속성과 <div>의 중첩되는 곳이, 시도 할 수 :

.nesteddiv{ 
    width: 50%; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
} 

.nesteddiv img{ 
    vertical-align: middle; 
} 

Answer 3

내가를 사용하는 제안을 <figure> 및 <figcaption> 태그는이 목적을 위해 display: inline-block과 결합하여 태그 :

#container figure { 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <figure> 
 
     <img src="http://lorempixel.com/100/100/business/1" /> 
 
     <figcaption>Owner</figcaption> 
 
    </figure> 
 
    <figure> 
 
     <img src="http://lorempixel.com/100/100/business/2" /> 
 
     <figcaption>Admin</figcaption> 
 
    </figure> 
 
</div>