css 아이콘과 텍스트가 서로 가운데에 정렬

Question

상자 안에 아이콘과 텍스트를 배치하고 가운데에 배치하려면 어떻게해야합니까? 텍스트를위한 공간이 충분하지 않으면 상단 텍스트 아래에서 새 줄을 끊어야합니다. 그래서 다음과 같이 :

<div class="wrapper"> 
    <span class="icon"></span> 
    <span class="text">First line second line</span> 
</div 

Answer 1

희망이 아이디어는 여기에 두 가지입니다

.wrapper { 
 
    width: 300px; 
 
    background-color: red; 
 
    height: 150px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.icon { 
 
    height: 50px; 
 
    width: 56px; 
 
} 
 

 
.text { 
 
    margin: 10px; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    font-size: 20px; 
 
}

<div class="wrapper"> 
 
    <img class="icon" src="http://i.imgur.com/FApqk3D.jpg"> 
 
    <span class="text">First line 
 
     <br>second line</span> 
 
    </div

Answer 2

두 display: inline-block 요소를 가지고, 나란히 배치 할 것입니다.

그리고 적절하게 정렬되도록 margin을 제공하십시오. flex을 사용하지 않고 수행 할 수 있습니다.

.wrapper { 
 
    width: 324px; 
 
    background-color: red; 
 
    height: 130px; 
 
    text-align: center; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
.icon { 
 
    height: 50px; 
 
    width: 49%; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
    vertical-align: bottom; 
 
} 
 

 
.icon img { 
 
    width: 50px; 
 
    float: right; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    width: 49%; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    vertical-align: middle; 
 
}

<div class="wrapper"> 
 
    <div class="icon"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/weather-2-4/100/Weather_Set-07-512.png" /> 
 
    </div> 
 
    <div class="text">First line second line</div> 
 
    </div