html - 如何在css/html中实现这种样式？

我目前正在开发一个网站，并尝试实现这种风格：



图标带有圆角（完成）的图标。但是我的问题来自文本。在下面的图片中，我想它带有text-align left，但是一切都非常合适，每个文本之间的间距，align。

但是，当我尝试做同样的事情时，它是这样的：



忽略右侧（准备好后我将只复制粘贴左侧）

就像你们看到的那样，文本始终保持折线并且没有居中作为原始图像。

这是代码：

.wrapper {
  display: flex;
  text-align: center;
}

.block {
  width: 50%;
}

.lista-fazemos {
  list-style-type: none!important;
  padding: 0;
  margin: 0;
  text-align: right;
}

.circle {
  display: inline-block;
  border-radius: 60px;
  border-color: black;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  font-size: 20px;
  color: #A52222;
  margin-right: 15px;
}

.homem-fazemos {
  float: right;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<div class="wrapper">
  <div class="block">
    <ul class="lista-fazemos">
      <li>
        <i class="fas fa-wrench circle"></i>
        <strong>Instalação</strong><br> Fazemos instalação de produtos comprados em nossa loja sem custo adicional!
        <br>
      </li>
      <li>
        <i class="fas fa-truck circle"></i>
        <strong>Instalação</strong><br> Mora longe? Sem problemas, temos serviços de entrega que irão te satisfazer! <br>
      </li>
      <li>
        <i class="fas fa-plus circle"></i>
        <strong>Instalação</strong><br>Aqui somos nota + em qualidade! Pode ficar tranquilo, temos os melhores produtos! <br>
      </li>
    </ul>
  </div>
  <div class="block">
    <ul class="lista-fazemos">
      <li>
        <i class="fas fa-wrench circle"></i> Texto texto Texto texto<br>
      </li>
      <li>
        <i class="fas fa-truck circle"></i> texto texto texto texto <br>
      </li>
      <li>
        <i class="fas fa-plus circle"></i> texto texto texto texot <br>
      </li>
    </ul>
  </div>
</div>

谢谢，抱歉我的英语不好。

最佳答案

如果要在一致的网格状布局中对齐图标，标题和描述性段落（按垂直顺序排列，然后水平排列），2018年的一种现代方法是使用CSS Grid。

工作示例：

body {
font-family: arial, helvetica, sans-serif;
}

.contents {
display: grid;
grid-template-rows: repeat(4, 25%);
grid-template-columns: repeat(2, 80px 220px);
grid-row-gap: 6px;
}

.contents i {
display: block;
width: 60px;
margin: 10px;
line-height: 60px;
font-size: 40px;
text-align: center;
color: rgb(255, 0, 0);
border: 3px solid rgb(255, 0, 0);
border-radius: 50%;
}

.contents div {
width: 208px;
padding: 0 6px;
background-color: rgb(227, 227, 227);
}

h2, p {
max-width: 220px;
}

h2 {
margin-bottom: 2px;
font-size: 12px;
line-height: 12px;
}

p {
margin-top: 0;
font-size: 10px;
}

.heading-2 {
grid-area: 2 / 2 / 3 / 3;
}

.heading-3 {
grid-area: 3 / 2 / 4 / 3;
}

.heading-4 {
grid-area: 4 / 2 / 5 / 3;
}

.heading-5 {
grid-area: 1 / 4 / 2 / 5;
}

.heading-6 {
grid-area: 2 / 4 / 3 / 5;
}

.heading-7 {
grid-area: 3 / 4 / 4 / 5;
}

.heading-8 {
grid-area: 4 / 4 / 5 / 5;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="contents">
<i class="fa fa-wrench"></i>
<div class="heading-1">
<h2>Heading One</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-wrench"></i>
<div class="heading-2">
<h2>Heading Two</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-truck"></i>
<div class="heading-3">
<h2>Heading Three</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-truck"></i>
<div class="heading-4">
<h2>Heading Four</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-5">
<h2>Heading Five</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-6">
<h2>Heading Six</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-7">
<h2>Heading Seven</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-8">
<h2>Heading Eight</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

</div>