對齊頁面中心的跨度文本

我的網站有一個span標記。對齊頁面中心的跨度文本

我想對齊頁面中心的跨度文本。

<span id="notice">Please Read the notice</span>

我正在像下面一樣使用CSS。

#notice{ 
    color:#D05679; 
    font-family: Signika; 
    font-size:15px; 
    text-align:center; 

    }

但這不起作用。請建議。 PS：謝謝大家的回答。他們都工作。我犯了一個愚蠢的錯誤。

來源

2015-12-02 Suraj

中心怎麼樣，垂直？水平？都？ –

水平居中對齊 – Suraj

add display：block to your CSS。

#notice{ 
color:#D05679; 
font-family: Signika; 
font-size:15px; 
text-align:center; 
display:block; 
}

解釋：text-align: center將使範圍的內容居中在範圍的邊界內。但是span元素，默認情況下，只有一樣寬，它的內容：

|content|

而一些其他元素，如div和p，默認情況下，佔據全部可用寬對他們說：

|content                     |

區別在於span設置爲display:inline，而div和p設置爲display:block。

來源

2015-12-02 10:04:29

text-align影響元素內部的文本但默認情況下span是一個內聯元素，因此只與內容一樣寬。所以雖然範圍內的文本是居中你不能說，因爲跨度只有文本寬。

所以這裏的解決方案只是將text-align:center添加到父元素...不是跨度。

body { 
 
    text-align:center; 
 
    }

<span id="notice">Please Read the notice</span>

來源

2015-12-02 10:05:46

改變你這樣的代碼

<div id="notice"> 
<span >Please Read the notice</span> 
</div>

來源

2015-12-02 10:06:25

嘗試過。沒有工作 – Suraj

SPAN是不是塊元素，因此，在默認情況下，它不能用於alignin文本。你可以，交流以上： - 設置顯示：塊，它將佔用100％的寬度，然後將工作文本對齊：中心 - 設置顯示：內聯塊;和餘量：0自動;在這種情況下，SPAN將與內容相同，但會按頁面中心對齊。這取決於你的佈局。在風格

來源

2015-12-02 10:08:51 user2443795

使用可能爲你工作

#notice{ 
    color:#D05679; 
    font-family: Signika; 
    font-size:15px; 
    text-align:center; 
    display:block; 
    margin:0px auto; 
    text-align:center; 
    }

來源

2015-12-02 10:09:23

這裏是Working Fiddle和CSS

#notice{ 
    color:#D05679; 
    font-family: Signika; 
    font-size:15px; 
    text-align:center; 
    display: block; 

    }

來源

2015-12-02 10:10:01 Dasrath

試試這個..

#notice{ 
 
    color:#D05679; 
 
    font-family: Signika; 
 
    font-size:15px; 
 
    text-align:center; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 

 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<title>Test</title> 
 
</head> 
 
<body> 
 
<div id="notice"> 
 
    <span >Please Read the notice</span> 
 
</div> 
 
</body> 
 
</html>

來源

2015-12-02 10:11:01

@suraj。運行代碼片段 –

嘗試這一個：

span { 
 
    text-align: center; 
 
    display: block; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 

 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 

 
    <title>Test</title> 
 

 
</head> 
 

 
<body> 
 

 
    <span>Please Read the notice</span> 
 

 

 
</body> 
 

 
</html>

來源

2015-12-02 10:25:36

可以使用Flexbox的性能。

HTML

<div id="notice"> 
<div>Please Read the notice</div> 
</div>

CSS：

#notice { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100% 
} 

#notice > div { 
    flex: 0 0 auto; 
}

有關詳細信息，你可以看到這個鏈接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-12-02 11:00:47

對齊頁面中心的跨度文本

回答

相關問題