Question

我正在通过bootstrap＆amp; amp; CSS有时候我注意到text-align并不总是一样，所以根据我自己的理解，有人可以用text-align: center;来解释我遇到的现象吗？

问题的再现：

我有一个按钮，其中包含一个位于绝对位置的容器DIV，其中DIV是一个a标记，其中包含span标记它包装了链接文本。

到目前为止，我对CSS的理解使我相信，如果我将text-align:center应用于a标记，则文本应该在DIV内居中，但它不是'直到我将中心规则应用于div本身，其中的文本自身对齐。我在这里错过了什么吗？

HTML ：

<div class="link-wrapper">
  <a href="#">
    <span>Text</span>
  </a>
</div>

CSS

.link-wrapper{
    width: 200px;
    height: 35px;
    background-color: #c74e3e;
    position: absolute;
    bottom: 40px;
    margin-top: 35px;
    /* line-height: 35px; */
    padding-top: 6px;
}

.link-wrapper a{
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
}

.link-wrapper a span{
    text-align: center;
}

Answer 1

text-align: center;适用于您应用它的元素中的元素。

至于为什么它不能在锚上工作： 默认情况下，锚元素（<a>）显示值为inline 。这基本上意味着它只会和它的内容一样大。所以从技术上讲，当你将文本应用到锚元素时文本是居中的，但是因为锚的宽度与文本相同而不明显。

如果您更改锚点的显示值并给它一个宽度，您将看到我在说什么：

<div class="link-wrapper">
    <a href="#">
      <span>Text</span>
    </a>
</div>

.link-wrapper {
    width: 200px;
    height: 35px;
    background-color: #c74e3e;
    position: absolute;
    bottom: 40px;
    margin-top: 35px;
    /* line-height: 35px; */
    padding-top: 6px;
}
.link-wrapper a {
    display: inline-block;
    width: 80%;
    border: 1px dashed white;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
}

http://jsfiddle.net/mnekkn03/

如果您要将display: block;应用于锚元素，则会填充.link_wrapper DIV，text-align: center将对锚元素起作用。

<div class="link-wrapper">
    <a href="#">
      <span>Text</span>
    </a>
</div>

.link-wrapper {
    width: 200px;
    height: 35px;
    background-color: #c74e3e;
    position: absolute;
    bottom: 40px;
    margin-top: 35px;
    /* line-height: 35px; */
    padding-top: 6px;
}
.link-wrapper a {
    display: block;
    border: 1px dashed white;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
}

http://jsfiddle.net/uk91ybca/

就个人而言，除非有其他理由这样做，否则我会将text-align: center应用于.link_wrapper DIV。

<div class="link-wrapper">
    <a href="#">
      <span>Text</span>
    </a>
</div>

.link-wrapper {
    width: 200px;
    height: 35px;
    background-color: #c74e3e;
    position: absolute;
    bottom: 40px;
    margin-top: 35px;
    /* line-height: 35px; */
    padding-top: 6px;
    text-align: center;
}
.link-wrapper a {
    font-size: 18px;
    text-transform: uppercase;
}

http://jsfiddle.net/opamhc3y/

Answer 2

要将inline-block或inline级别居中，您必须将text-align: center;应用于此级block级

.link-wrapper{
  width: 200px;
  height: 35px;
  background-color: #c74e3e;
  position: absolute;
  bottom: 40px;
  margin-top: 35px;
  /* line-height: 35px; */
  padding-top: 6px;
  text-align: center;

}

.link-wrapper a{
    font-size: 18px;
    text-transform: uppercase;
}

<div class="link-wrapper">
  <a href="#">
    <span>Text</span>
  </a> 
</div>

Answer 3

由于a和span是内联元素，因此不会向其添加text-align属性，其宽度等于其内容宽度，因此内容无法居中

您可以将text-align: center;应用于.link-wrapper，.link-wrapper是一个块元素，并且有自己的宽度。

或者您可以将a或span的显示类型更改为display:block;，以使其具有自己宽度的块元素。

Answer 4

将text-align移至.link-wrapper规则。这是有效的原因是因为link-wrapper元素是一个块（因为它是一个div）。内联元素（例如<a>或<span>标记的大小始终与其内容相符，因此在该上下文中居中并不真正有意义。当然，您始终可以使用CSS中的display: block来更改此内容。

Here，你可以看到一些好的，可视化的例子。

Answer 5

将text-align视为2个元素之间的关系 - 一个是外部的，一个是内部的。外部的是你正在使用的宽度，内部的是你想要在外部元素中居中的东西。

将text-align样式放在<a>中，您尝试做的是将文本置于<a>本身的中心位置。但是，<a>元素的宽度通常由其中文本的长度定义，因此从技术上讲，它的工作原理应该是将<a>的文本居中放在{{1}的中心。 }。恰好恰好与文本宽度相同的大小

但是在这种情况下，您希望将链接文本置于<a>中心，因为您希望文本（默认情况下为link元素）位于div .link-wrapper的中心。因此，您将div放在text-align: center元素上，以便div内的所有内容都水平居中。

如果你想将文本置于div本身的中心位置，只需在<a>上加一个宽度（虽然我真的没有找到针对这种特殊情况的许多有用案例，除非你'让锚看起来像一个固定宽度的按钮）

Answer 6

对于text-align: center;，规则摘要：

适用于儿童
水平居中儿童
仅适用于内联和内联块元素

将text-align: center;应用于a代码不会产生任何影响。因为a标记是内联元素。与块元素相反，内联元素不会尽可能多地水平扩展。相反，他们试图躲避并适应他们内心的内容。因此，尽可能小/适合内容。

现在您可以看到，即使元素中的文本是“居中”，除非您这样做，否则它不会真正改变任何内容：

a.your_ele {
   display:inline-block;
   width:100%;
}

文字对齐属性混淆

6 个答案: