为什么 CSS text-align 属性 居中块级内容?
Why CSS text-align property centers block-level content?
我有 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>
是的。块级别(和具有宽度的内联块)可以应用 text-align:center。
第 i 个元素将从它们的父元素 a 标签继承,因此也将居中。
显示块和 table 彼此非常不同,因为子元素的呈现方式不同,即 table 的子元素可能是 display:table-cell。
此外,text-align 对行内元素毫无意义。
是的。块 容器 可以应用文本对齐,对齐它们的 内容。
正常流中的块级元素占据其包含块的整个宽度,在您的示例中是 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>
元素紧紧包裹在其中来确定。
我有 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>
是的。块级别(和具有宽度的内联块)可以应用 text-align:center。
第 i 个元素将从它们的父元素 a 标签继承,因此也将居中。
显示块和 table 彼此非常不同,因为子元素的呈现方式不同,即 table 的子元素可能是 display:table-cell。
此外,text-align 对行内元素毫无意义。
是的。块 容器 可以应用文本对齐,对齐它们的 内容。
正常流中的块级元素占据其包含块的整个宽度,在您的示例中是 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>
元素紧紧包裹在其中来确定。