html - 将文本与图像对齐

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>