需要帮助对齐文本图像和按钮

Question

我需要帮助。我目前正在为我的网站开发我的新网站，我无法弄清楚如何正确对齐我的文本，图像和按钮。为了调整它们，我尝试了很多东西，但我似乎无法弄清楚如何自己做。如果需要，我会提供更多信息。提前致谢！

以下是我的code及以下，您可以看到结果：

Answer 1

假设您只想垂直对齐所有项目，您可以简单地为容器指定值text-align:center，同时为包含块提供width。因此，为了您的代码，它将是这样的。并不是因为你使用内联样式而改变了你的标记。

我设置为display:flex的包装器，以帮助它很好地对齐。您可以阅读有关flexbox here

的信息

HTML：

<div class="wrapper">

<section>
  <h2>MVP</h2>
  <img class="img-rounded" style="float: left;" title="" src="//dunb17ur4ymx4.cloudfront.net/packages/images/d04fbf5918208479df283e7fa0ad8f0fcc0d7acb.png"/>
<button>helpme</button>
</section>

<section>
 <h2>MVP</h2>
   <img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section>

<section>
  <h2>MVP</h2>
 <img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section><

</div>

CSS：

.wrapper section {
    text-align:center;
    justify-content:center;
    width:200px;
 }

 .wrapper {
   display:flex;
 }

Fiddle