HTML/CSS:justify-在表格的單元格中居中并對齊兩個圖示

他的伙計們，

我有這張表，最后一列有兩個圖示。我希望這些圖示位于每個圖示旁邊，并與單元格中的一個不錯的空間對齊。那需要什么引數？我試過了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;
}

uj5u.com熱心網友回復：

你能在你的圖示上添加類嗎<td >

 {% 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 到那個類。

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

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

uj5u.com熱心網友回復：

您可以為這兩個圖示添加父 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 django 空间 证明合法

上一篇：影像不允許相鄰div正確對齊

下一篇：溢位自動和空白的問題：nowrap和flexbox