在 HTML 中垂直而不是水平放置图片库 [重复]答案

【问题标题】：Put images gallery vertically instead of horizontally in HTML [duplicate]在 HTML 中垂直而不是水平放置图片库 [重复]
【发布时间】：2018-07-09 06:09:01
【问题描述】：

首先我想警告你，我对 HTML 很陌生，所以如果我问愚蠢的问题，请提前原谅我！我已经开始了这门课，我们需要创建自己的网站，他们教我们如何创建一个简单的图片库，但只能是水平的。但是，为了为我的网站创建更好的设计，我想创建一个图像库，但垂直。我能怎么做？我在其他地方看到的答案很少，但我们还没有学到任何复杂的东西，所以我什么都不懂！这是我在 HTML 文档上写的内容：

<head>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="http://media.mq.edu.au/mas240/js/gallery.js"></script>

</head>

<section>

<img src="images/th-dancestudio2.jpg" class="gallery" href="images/dancestudio2.jpg" />

<img src="images/th-dancestudio3.jpg" class="gallery" href="images/dancestudio3.jpg" />

<img src="images/th-dancestudio4.jpg" class="gallery" href="images/dancestudio4.jpg" />

<img src="images/th-dancestudio5.jpg" class="gallery" href="images/dancestudio5.jpg" />

</section>

这是我在 CSS 文档上写的：

.gallery {
float: center;
margin-top: 30px;
margin-bottom: 20px;
border: 5px solid black;
border-radius: 15px;
}

【问题讨论】：

标签： html css image gallery

【解决方案1】：

没有像float: center; 这样的属性，如果你想让它们垂直显示，请使用display: block。

像这样：

.gallery {
    display: block;
    margin-top: 30px;
    margin-bottom: 20px;
    border: 5px solid black;
    border-radius: 15px;
    text-align: right;
}

<section>

<img src="images/th-dancestudio2.jpg" class="gallery" href="images/dancestudio2.jpg" />

<img src="images/th-dancestudio3.jpg" class="gallery" href="images/dancestudio3.jpg" />

<img src="images/th-dancestudio4.jpg" class="gallery" href="images/dancestudio4.jpg" />

<img src="images/th-dancestudio5.jpg" class="gallery" href="images/dancestudio5.jpg" />

</section>

如果您希望图像居中或向右对齐，只需使用 text-align 属性

【讨论】：

谢谢你成功了！但是它停留在页面的中间。如果我不能使用 float 我必须使用哪个属性来将画廊定位到页面的左侧或右侧？
float: left; 或 float: right; 或 text-align: left; 或 text-align: right;
如果我使用float:left;，它会水平放回画廊，tex-align: left 不会做任何事情：/
我已经修改了答案。
再次感谢，但通过使用text-align 属性，画廊再次变为水平：/