在HTML中垂直放置图片库，而不是水平放置
在HTML中垂直放置图片库，而不是水平放置
提问于 2015-06-01 20:01:19
首先我想警告你，我是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;
}回答 1
Stack Overflow用户
发布于 2015-06-01 20:04:31
如果您想让它们垂直显示，则没有float: center; use 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属性
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30572975
复制相关文章
相似问题