使文字与图像对齐

Question

我需要使文本与图像对齐。

我尝试过，对齐顶部，对齐图像中心。以及分别向左和向右浮动图像和文本。仍然无济于事。

<p>
  <img class="calendar" src="img/calendar-icon.png" /> 
  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
</p>

具有屏幕截图，并将结果发布为上述代码以及我真正想要的。

Answer 1

使用Flex

.list{display:flex;}
.img-block{width:80px; margin-right:20px}
.img-block img{max-width:100%}
p{margin:0;}

<div class="list">
<div class="img-block">
  <img src="https://image.flaticon.com/icons/png/512/26/26012.png" />
</div>
<p>System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.</p>
<div>

Answer 2

如果您希望图像和文本在同一行上并且文本在顶部，则只需将此CSS应用于p标签

p{
   display: flex;
}

Answer 3

尝试使用display: flex;。这是示例代码。希望对您有帮助。

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.image {
  margin-right: 10px;
}

<div class="d-flex flex-row align-items-center">
  <img class="image" src="https://via.placeholder.com/50" />
  <span>System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.</span>
</div>

Answer 4

.image {
  margin-right: 10px;
    float:left;
}

<div>
  <img class="image" src="https://via.placeholder.com/50" />
  <span>System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
      System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
  </span>
</div>

此方法与float一起使用！

Answer 5

只需在 img 标签中添加 align 属性，值“ 左”，对此进行检出

<img src="https://image.flaticon.com/icons/png/512/26/26012.png" align="left" style="
    width: 50px;
    padding-right: 20px;
">

Answer 6

如果您将文本包含在段落或span标记中，则可以更好地控制样式。由于同时具有文本和图像，最好建议使用div标签将p和img包围起来，而不是使用段落标签。在代码中，我保留了'p'周围，并在文本周围使用了一个跨距，但以后会考虑使用。

如果要将图像和文本都居中对齐，则可以使用

vertical-align:middle;

如果要拆分文本，可以在span标记中插入br标记（如我所做的那样）。如果多余，则将其取出。

希望这会有所帮助

#sysdown {
  width: 100%;
}

img.calendar {
  width: 70px;
  height: 70px;
}

#sysdown>span {
  display: inline-block;
}

img,
span {
  vertical-align: middle;
}

<p id="sysdown">
  <img class="calendar" src="img/calendar-icon.png" />
  <span>System will go under maintenance from <br/>15 Jan 2019 06.00 to 20 Jan 2019 10.00.<br/> Sorry for any inconvenience caused.</span>
</p>