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

Question

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

这是我code和下面你可以看到的结果是：

Answer 1

假设你只是想垂直对齐的所有项目，你可以简单地给出text-align:center容器中的值，同时给予包含块a 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