需要幫助對齊文本圖像和按鈕

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