Question

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

        <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>

这些是图片下方的网址，无论我尝试什么，都没有排队。

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

的屏幕截图

P.S。这是我在Stack Overflow，TIA的第一篇文章！

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。

如何在CSS中的div树中对齐图像和URL？

1 个答案: