css图标和文本彼此相邻

Question

如何将图标和文字放在框中，然后将它们居中。如果文本没有足够的空间，它应该在顶部文本下突破到新行。像这样：

public delegate T Transform<T>(T input);

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