为什么 CSS text-align 属性居中块级内容？

Question

我有 2 个问题。
1) 导航链接中的文本是否居中，因为我将这些链接（a 标签）的显示属性的值设置为 block，现在它基本上与我在其中居中文本一样一个 p 元素？
2) 我也将 i 元素（font awesome 图标）的显示属性设置为 block，那么为什么这些元素也居中？如果将 i 元素上的显示属性更改为 table，则这些图标不会居中。在这种情况下，block 值的行为不应该与 table 相同吗？据我所知，我只能使用 text-align 来对齐行内和行内块元素。那为什么会这样呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Text-align</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <style>
            .cf:before,
            .cf:after {
                content: "";
                display: block;
            }
            
            .cf:after {
                clear: both;
            }
            
            body {
                margin: 0;
                font: 16px/1 sans-serif;
            }
            
            nav {
                height: 120px;
                background-color: #f2f2f2;
                padding: 0 5%;
            }
            
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            
            li {
                float: left;
                color: #a6a6a6;
                border-left: 1px solid #a6a6a6;
            }
            
            li:last-child {
                border-right: 1px solid #a6a6a6;
            }
            
            li:hover {
                color: #de5728;
            }
            
            a {
                display: block;
                text-decoration: none;
                color: inherit;
                font-size: 10px;
                text-transform: uppercase;
                padding: 37px 0;
                width: 136px;
                text-align: center;
            }
            
            nav a .fa {
                display: block;
                font-size: 36px;
            }

        </style>
    </head>

    <body>
        <nav>
            <ul class="cf">
                <li>
                    <a href="#">
                        <i class="fa fa-shield"></i> Domov
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-leaf"></i> Portfolio
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-bolt"></i> O nas
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-trophy"></i> Kontakt
                    </a>
                </li>
            </ul>
        </nav>
    </body>
</html>

Answer 1

是的。块级别（和具有宽度的内联块）可以应用 text-align:center。
第 i 个元素将从它们的父元素 a 标签继承，因此也将居中。

显示块和 table 彼此非常不同，因为子元素的呈现方式不同，即 table 的子元素可能是 display:table-cell。

此外，text-align 对行内元素毫无意义。

Answer 2

是的。块容器可以应用文本对齐，对齐它们的内容。
正常流中的块级元素占据其包含块的整个宽度，在您的示例中是 li 元素的内容框的宽度。

元素的内容框宽度是根据这个等式计算的：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

在您的示例中，边距和填充解析为 0，边框解析为 0 或 1 像素。包含块由 <a> 元素提供，其宽度的剩余部分是 <i> 元素在 display:block.

时的内容框宽度

text-align 属性是继承的，因此 <i> 元素采用对齐方式并将其内容在其内容框的宽度内居中，<i> 的内容fontawesome 通过 :before 伪元素提供的元素。

Table 元素是块级的，但它们以不同的方式解析相等性。相反，它们的内容框的宽度是缩小到适合的，并且在您的示例中，包含块的任何剩余宽度都被赋予右边距。

这会将 table 放在其容器的左侧，并且内容（同样是从 fontawesome 生成的内容）紧紧地放在里面。在 table 中创建的匿名 table 单元格仍然继承了文本对齐设置，但是内容的任何一侧都没有 space 可以让它移入。所以它看起来也是打开的浮动 <li> 元素的左侧，其宽度通过将 <a> 元素紧紧包裹在其中来确定。

为什么 CSS text-align 属性 居中块级内容？

Why CSS text-align property centers block-level content?

css

font-awesome

为什么 CSS text-align 属性居中块级内容？