如何在列表中的圓中居中顯示文本？

Question

我試圖通過使用兩個圓圈作為按鈕來制作某種“ 2選項選擇游戲”。 在圓內應有一個文本，該文本應居中且不會從圓環中伸出。 但是，當文本太大時，它會突出顯示在圓圈下方。

HTML：

<body>
<header>
<h1>Choose</h1>
</header>

<ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bycicle with friends</li>
</ul>

</body>

CSS:

h1 {
    text-align: center;
    font-family: 'oswalditalic';
    font-size: 48px;
    margin: 0;
}
ul{
    text-align: center;
    padding: 0;
}


ul li{
    font-family: 'oswalditalic';
    display: inline-block;
    list-style-type: none;
    margin:15px 20px;
    color: black;
    font-size: 26px;
    text-align: center;

    height: 300px;
    width: 300px;
    line-height: 300px;

    -moz-border-radius: 50%;
    border-radius:50%;

    background-color: blue;
}

https://jsfiddle.net/sf3dquLs/

Answer 1

這是因為將line-height為垂直居中對齊內容的值。 它在只有一行但有兩行或更多行的情況下起作用，它應用了300px的行高，並且太多了。

您可以結合使用display:table-cell和vertical-align: middle使它起作用。

 h1 { text-align: center; font-family: 'oswalditalic'; font-size: 48px; margin: 0; } ul{ text-align: center; padding: 0; display: table; margin: auto; border-spacing: 30px; } ul li{ font-family: 'oswalditalic'; display: inline-block; list-style-type: none; margin:15px 20px; color: black; font-size: 26px; text-align: center; display: table-cell; height: 300px; width: 300px; -moz-border-radius: 50%; border-radius:50%; vertical-align: middle; background-color: blue; }

 <body> <header> <h1>Choose</h1> </header> <ul> <li>Read a book and lay on bed the whole day</li> <li>Go outside and ride a bycicle with friends</li> </ul> </body>

Answer 2

您面臨的問題是由於line-height:300px 。 這樣的效果是，每行（也包括換行后）將占據300px。 我看到您添加了此屬性以使文本居中。 因此，如果我們刪除線，則必須找到另一種方法來完成居中。 另一種可能的方法是使用：before元素並賦予它一定的高度。

 h1 { text-align: center; font-family: 'oswalditalic'; font-size: 48px; margin: 0; } ul { text-align: center; padding: 0; } ul li { font-family: 'oswalditalic'; display: inline-block; list-style-type: none; margin: 15px 20px; color: black; font-size: 26px; text-align: center; height: 300px; width: 300px; -moz-border-radius: 50%; border-radius: 50%; background-color: blue; word-wrap: break-word; } ul li:before { display: block; height: 120px; content: ""; }

 <body> <header> <h1>Choose</h1> </header> <ul> <li>Read a book and lay on bed the whole day</li> <li>Go outside and ride a bicycle with friends</li> </ul> </body>

如何在列表中的圓中居中顯示文本？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-05-19 21:01:35

解決方案2
2 2016-05-19 21:09:39

如何在列表中的圓中居中顯示文本？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-05-19 21:01:35

解決方案2 2 2016-05-19 21:09:39

解決方案1
2 已采納 2016-05-19 21:01:35

解決方案2
2 2016-05-19 21:09:39