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