文本对齐属性混淆

Question

我正在通过引导学习我的方式& 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规则。这工作的原因是因为链接包装元素是一个块（因为它是一个div）。内联元素（例如<a>或<span>标签）始终与其内容大小相匹配，因此在该上下文中居中并不合理。当然，你可以随时在CSS中使用display: block来改变它。

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

Answer 5

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

你试图通过把text-align风格<a>做的是居中的<a>本身的文本。然而，<a>元素的宽度通常由其中的文本长度来定义，因此在技术上它的工作方式应该如此 - 将<a>的文本置于<a>的中心。宽度恰好与文本的宽度相同

但是在这种情况下，您希望将链接文本居中放置在div .link-wrapper之内，因为您希望文本（默认为链接元素）为位于div的中心。所以你把text-align: center放在div元素上，这样div里面的所有东西都会水平居中。

在要居中的 <a>本身内的文本的情况下

，只要坚持对<a>的宽度（虽然我真的发现很多有用的情况下，对于这种特殊的情况下，除非你正在做锚的样子具有固定宽度的按钮）

Answer 6

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

1. 适用于儿童
2. 中心的儿童水平
3. 仅适用于内联和行内块元素

应用text-align: center;到a标签将不会有任何效果。因为a标记是一个内联元素。内嵌元素与块元素相反，不会尽可能地水平扩展。相反，他们试图回避并适应他们的内容。尽可能小/适合内容。

现在你可以看到，即使一个元素中的文字是“中心”，除非你做它不会真的改变什么：

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