需要帮助对齐文本图像和按钮
问题描述:
我需要帮助。我目前正在为我的网站开发我的新网站,但我无法弄清楚我的文字,图片和按钮是否正确对齐。为了使它们一致,我尝试了很多东西,但我似乎无法弄清楚如何自己做。如果需要,我会提供更多信息。提前致谢!需要帮助对齐文本图像和按钮
这是我code和下面你可以看到的结果是:
答
假设你只是想垂直对齐的所有项目,你可以简单地给出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;
}
我已经把你的代码放到一个的jsfiddle这里:https://jsfiddle.net/qLfusemy/ – zik