アイコンとテキストをボックス内に配置して中央に配置するにはどうすればよいですか。テキストのための十分なスペースがない場合は、トップテキストの下に改行する必要があります。したがって、このように：cssアイコンとテキストが隣り合うように配置
<div class="wrapper">
<span class="icon"></span>
<span class="text">First line second line</span>
</div
希望これは
.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+1。しかし、何の努力もせずに質問に答えることは非常に悪い習慣であり、それはSOの投稿の質を低下させるでしょう。 –
ありがとう、これは私が探していたものです –
を行うだろうここでの考え方は、2つの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
あなたがしようとしている何のためのフィドルを作成することができます。
は、コードを参照してください？ソリューションの場合は –