时间戳

首页 > 解决方案 > 水平对齐文本行？

html - 水平对齐文本行？

问题描述

我想让每一行 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 设置为特定宽度，然后以某种方式证明该宽度？

标签： htmlcss

解决方案

看起来您正在显示表格数据，那么为什么不使用<table>?

如果您想要某种响应式布局，那么您可以将display: tableand用于桌面，然后使用媒体查询在较小的断点处display: table-cell恢复。display: block

否则，为每个链接定义一个设置宽度将使它们很好地排列，例如.image-link { width: 33.33%; }

此外，要使弹性项目能够换行而不是显示在一行上，您需要使用#image-list.row { flex-wrap: wrap; }

推荐阅读