文本對齊屬性混淆

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%; 
}