[英]Horizontally justify rows of text?
我想使每行div中的链接合理,并使其位于页面的中心,因此它看起来更干净(假定下面位于页面的中心):
Chrysanthemum.jpg Desert.jpg Hydrangeas.jpg
Jellyfish.jpg Koala.jpg Lighthouse.jpg
Penguins.jpg test (1).jpg test (2).jpg
test (3).jpg test (4).jpg Tulips.jpg
它不必看起来完全一样,因为图像名称的长度是可变的,我只是想使其比现在更好:
的HTML:
<div id='image-list'>
<div class="row">
<a class="image-link" href="/static/images/Chrysanthemum.jpg"> Chrysanthemum.jpg </a>
<a class="image-link" href="/static/images/Desert.jpg"> Desert.jpg </a>
<a class="image-link" href="/static/images/Hydrangeas.jpg"> Hydrangeas.jpg </a>
</div>
<div class="row">
<a class="image-link" href="/static/images/Jellyfish.jpg"> Jellyfish.jpg </a>
<a class="image-link" href="/static/images/Koala.jpg"> Koala.jpg </a>
<a class="image-link" href="/static/images/Lighthouse.jpg"> Lighthouse.jpg </a>
</div>
<div class="row">
<a class="image-link" href="/static/images/Penguins.jpg"> Penguins.jpg </a>
<a class="image-link" href="/static/images/test%20%281%29.jpg"> test (1).jpg </a>
<a class="image-link" href="/static/images/test%20%282%29.jpg"> test (2).jpg </a>
</div>
<div class="row">
<a class="image-link" href="/static/images/test%20%283%29.jpg"> test (3).jpg </a>
<a class="image-link" href="/static/images/test%20%284%29.jpg"> test (4).jpg </a>
<a class="image-link" href="/static/images/Tulips.jpg"> Tulips.jpg </a>
</div>
</div>
CSS:
#image-list{
display: flex;
justify-content: space-around;
}
我也尝试过此CSS:
#image-list.row{
display: flex;
justify-content: space-around;
}
但这只是将所有内容推向左侧,似乎没有任何理由: 此处为屏幕截图
我忽略了什么或做错了什么? 我是否必须将div设置为特定宽度,然后以某种方式证明该宽度合理?
看起来您正在显示表格数据,那么为什么不使用<table>
呢?
如果需要某种响应式布局,则可以使用display: table
和display: table-cell
用于桌面,然后还原为display: block
在较小的断点处进行媒体查询。
否则,为每个链接定义一个设置的宽度将使它们很好地.image-link { width: 33.33%; }
例如.image-link { width: 33.33%; }
.image-link { width: 33.33%; }
另外,要使Flex项目可以换行而不是显示在一行上,您需要使用#image-list.row { flex-wrap: wrap; }
#image-list.row { flex-wrap: wrap; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.