如何在CSS中居中定位元素？

我只想在屏幕中間水平放置錨點，我該怎麼做？如何在CSS中居中定位元素？

<a href="http://www.example.com">example</a>

來源

2012-03-15 foreyez

我知道這是老問題，但沒有這些，就在Chrome確實爲我工作。「text-align：center＆display-block」的工作是什麼。希望能幫助到你。 – lsrom 2016-03-30 08:27:46

的text-align CSS屬性添加到其父樣式屬性

如：

<div style="text-align:center"> 
    <a href="http://www.example.com">example</a> 
</div>

或使用類（推薦）

<div class="my-class"> 
    <a href="http://www.example.com">example</a> 
</div>

.my-class { 
    text-align: center; 
}

參見工作示例如下：

.my-class { 
 
     text-align: center; 
 
\t background:green; 
 
\t width:400px; 
 
\t padding:15px; } 
 
\t .my-class a{text-decoration:none; color:#fff;}

<!--EXAMPLE-ONE--> 
 
\t <div style="text-align:center; border:solid 1px #000; padding:15px;"> 
 
     <a href="http://www.example.com">example</a> 
 
    </div> 
 

 
\t <!--EXAMPLE-TWO--> 
 
\t <div class="my-class"> 
 
     <a href="http://www.example.com">example</a> 
 
    </div>

問：爲什麼不text-align風格得到應用到a元素，而不是div？

答：的text-align風格描述瞭如何inline內容是block元素內對齊。在這種情況下，div是一個塊元素，它的內聯內容是a。爲了進一步探討這個考慮纔有意義多麼少應用text-align風格的a元素時，它是伴隨着更多的文字

即使threre是換行符這裏的div所有內容都是內嵌的內容和因此會產生類似於：

純文本是內聯內容。 example跨度也內嵌的內容

它不」多大意義，因爲如何，如果text-align屬性將被應用於它，它‘榜樣’，在這種情況下，將顯示。

來源

2012-03-15 14:30:30 JaredMcAteer

沒有工作 – foreyez 2012-03-15 14:32:01

對不起它需要的父節點上......我已經編輯我的答案 – JaredMcAteer 2012-03-15 14:35:02

這就是答案我會選擇。 – danchet 2013-10-22 21:27:26

儘量繞到一個div和這些樣式添加到div：

width: 100%; 
text-align:center;

來源

2012-03-15 14:33:01 clem

默認情況下的錨聯呈現，所以設置text-align: center;上呈現爲阻止其最近的祖先。

來源

2012-03-15 14:33:03 Quentin

style="margin:0 auto; width:auto;"試試看。

來源

2012-03-15 14:33:26 RSM

這樣寫：

<div class="parent"> 
<a href="http://www.example.com">example</a> 
</div>

CSS

.parent{ 
    text-align:center 
}

來源

2012-03-15 14:34:12 sandeep

兩個選項，是有不同的用途：

HTML：

<a class="example" href="http://www.example.com">example</a>

CSS：

.example { text-align: center; }

或者：

.example { display:block; width:100px; margin:0 auto;}

來源

2012-03-15 14:34:40 bookcasey

有哪些不同的用途？ – corbin 2013-04-01 17:20:39

我認爲你不能做到這一點與內聯元素，如錨，跨度。但爲了使它工作，你必須設置顯示屏。

<a href="http://www.example.com" style="text-align:center;display:block;">example</a>

來源

2012-03-15 14:36:52 VJAI

有很多方法。

<!-- Probably the most common: --> 
<div style="text-align: center;"><a href="...">Link</a></div> 

<!-- Getting crafty... --> 
<a href="..." style="display: block; text-align: center;">Link</a></div>

也可能有其他方法，但這三個可能是最常見的。

來源

2012-03-15 14:40:27

CSS不能直接應用於錨標記的對準。的CSS（文本對齊：中心;）應被施加到母DIV /元件的對準效果發生在錨標籤。

來源

2012-11-18 09:50:54

-3

只要把中心標記之間：

<center>><Your text here>></center>

來源

2014-03-05 17:35:24 Reploy94

在HTML5''

標籤不被支持。 – 2014-03-05 17:40:23

不遵循此建議。 – danchet 2014-03-05 21:32:12

HTML編碼*語義*，而不是語法。。換句話說，HTML描述數據，並不意味着描述的佈局和外觀。這就是CSS是，如果你要問自己瞭解您網站看起來像，它幾乎肯定是一個CSS相關的任務。早在HTML錯誤的日子裏，引入了面向風格的標籤。從HTML 5開始，大多數都被棄用（任何人都記得？）。在HTML 4 IIRC中很早就廢棄了

。 – CodeOcelot 2016-05-06 18:58:55

<span style="text-align:center; display:block;"> 
<a href="http://news.awaissoft.com">Awaissoft</a> 
</span>

來源

2014-05-13 06:45:45 Awaissoft

嘗試

margin: 0 auto; 
display:table

希望幫助別人了。

來源

2016-02-23 17:13:20

你可以試試這個代碼：

/**code starts here**/ 

a.class_name { display : block;text-align : center; }

來源

2016-08-26 07:36:55

如何在CSS中居中定位元素？

回答

相關問題