html - 如何在 CSS 中对齐 div 树中的图像和 url？

Question

我正在 Udacity 学习如何成为前端开发人员。我需要提交一个元素。我遇到了几个我找不到帮助的问题，我的一些图像和 div 中的 url 不想正确对齐。我尝试使用此网站作为解决方案 https://codemyviews.com/blog/how-to-center-anything-with-css 因为它提供了对齐 block 的大多数变体......但它们都不起作用。

        <div class="row">
        <div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
        <div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
        <div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
    </div>

这些是图片，我试图将第一张图片向左对齐，第二张向中间对齐，第三张向右对齐。我可以通过在 html 中使用边距和填充来对齐它们，但我希望它适用于响应式设计。

        <div class="row">
        <div class="col-4">
            <a href="https://github.com/udacity/Appify/">https://github.com/udacity/Appify/</a>
        </div>
        <div class="col-4">
            <a href="https://github.com/udacity/Sunflower/">https://github.com/udacity/Sunflower/</a>
        </div>
        <div class="col-4">
            <a href="https://github.com/udacity/Bokeh">https://github.com/udacity/Bokeh/</a>
        </div>
    </div>

这些是图片正下方的 URL，无论我怎么尝试都没有对齐。

这是我的网页截图http://picpaste.com/Portfolio-NOGcuGm8.jpg

附言这是我在 TIA Stack Overflow 上的第一篇文章!

Answer 1

您可以使用 Bootstrap 的 text-center 和 text-right 类来修改列的内部对齐方式。

<div class="row">
    <div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
    <div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
    <div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>

如果您不使用 Bootstrap，这些类只需分别应用 text-align: center 和 text-align: right。