HTML/CSS : 对齐 - 在 table 的单元格中居中对齐两个图标

Question

他的伙计们，

我有这个 table 最后一列有两个图标。我希望图标在每个图标旁边，对齐并在单元格中带有漂亮的 space。那需要什么参数？我尝试使用 justify-content 和 margin 但它仍然是那样。

谢谢

这是我的结果：

我该如何纠正？

这是代码 html :

{% block content %}
<link rel="stylesheet" href="{% static 'test15.css' %}">
<div class="upload-app">
     
    <div class="upload-in">
        <h2>Upload</h2>

        <form method="post" enctype="multipart/form-data">
            
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Upload</button>
        </form>

        
        {% if url %}
            <p>Uploaded files : <a href="{{url}}">{{url}}</a></p>
        {% endif %}
    </div> 

    <div class="listfiles">
        <h2>Files Uploaded</h2>

        <table id="customers">
            <tr>
                <th>Filename</th>
                <th>Date</th>
                <th>Size</th>
                <th>Actions</th>
            </tr>

            {% for file in files %}
            <tr>
                <td>{{ file.Filename }}</td>
                <td>{{ file.Uploaded_at | date:'d.m.Y H:i'}}</td>
                <td>{{ file.SizeFile | filesizeformat}}</td>
                <td>
                    <a href="{% url 'download' file.Id %}">
                        <i class='bx bxs-download'></i>
                    </a>

                    <a href="">
                        <i class='bx bxs-file-pdf' ></i>
                    </a>
                </td>

            </tr>
            {% endfor %}
        </table>
    </div>
</div>

{% endblock %}

这里是 css :

.listfiles{
    margin-top: 20px;
    border-radius: 12px;
    background-color: #11101d;
    color: #fff;
    transition: all 0.5s ease;
    width: 800px;
    height: 600px;
}

.listfiles h2{
    display: flex;
    justify-content: center;
    font-size : 26px;
    padding-bottom: 20px;
    padding-top: 30px;
    margin-left: 25px;
}

.listfiles #customers{
    border-collapse: collapse;
    width: 100%;
}

#customers td{
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 12px;

}

#customers a{
    color: #fff;
    font-size: 14px;
    justify-content: center; 
    display: flex;
    row-gap: 3px;

}

#customers th {
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 14px;
}

#customers tr:nth-child(even){background-color: #272730b6;}

#customers tr:hover {background-color: rgb(83, 78, 78);}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #0a0911;
color: white;
}

Answer 1

能否请您将 class 添加到您的图标中 <td class="iconsColumn">

 {% for file in files %}
            <tr>
                <td>{{ file.Filename }}</td>
                <td>{{ file.Uploaded_at | date:'d.m.Y H:i'}}</td>
                <td>{{ file.SizeFile | filesizeformat}}</td>
                <td class="iconsColumn">
                    <a href="{% url 'download' file.Id %}">
                        <i class='bx bxs-download'></i>
                    </a>

                    <a href="">
                        <i class='bx bxs-file-pdf' ></i>
                    </a>
                </td>

            </tr>
            {% endfor %}

比在你的 css 中添加 flexBox class。

.iconsColumn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap:1rem
}

https://www.w3schools.com/csS/css3_flexbox_container.asp

Answer 2

您可以为这两个图标添加一个父级 div 并使用 display:flex

定位 div 来设计它的样式

<td>
   <div class="icons"
                    <a href="{% url 'download' file.Id %}">
                        <i class='bx bxs-download'></i>
                    </a>

                    <a href="">
                        <i class='bx bxs-file-pdf' ></i>
                    </a>
  </div>
</td>

对于css：

.icons{
display: flex;
justify-content : space-around
}

HTML/CSS : 对齐 - 在 table 的单元格中居中对齐两个图标

HTML/CSS : justify - center and align two icons in a cell of a table

html

css

django

space

justify

这是我的结果：

这里是 css :