リスト内の円の中心にテキストを配置するにはどうすればよいですか？

私は、2つの円をボタンとして使用して、ある種の「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/

出典

2016-05-19 PLAYCUBE

非プログラミング関連の提案：bycicle自転車でなければなりません。 – JohannesB

それが原因で縦中央コンテンツへline-heightの価値があります。 1行で2行以上の場合は300pxの行の高さが適用されますが、大きすぎます。

vertical-align: middleと組み合わせたdisplay:table-cellを使用すると、代わりに機能させることができます。

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>

出典

2016-05-19 21:01:35

Vincentに感謝します。しかし、あるサークルが他のサークルに比べてテキスト行が少ない場合は、スリップが少ないサークルが少し下になります。 – PLAYCUBE

ああ、申し訳ありませんが、私は他のコードの提案を意味しました。しかし、サークル間にもっとスペースを取る方法を知っていますか？ – PLAYCUBE

ul要素の表示タイプを変更したので、 'border-spacing'を使っていくらかのスペースを作ることができます（更新スニペット参照） –

あなたが直面している問題は、line-height:300pxによるものです。これの効果は、すべての行（ワードラップ後も）が300ピクセルを占めることです。私はあなたのテキストを中心にこのプロパティを追加したことがわかります。したがって、ラインを削除する場合は、センタリングを達成する別の方法を見つける必要があります。もう一つの可能な方法は、a：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>

出典

2016-05-19 21:09:39 JohannesB

2行でうまく動作しますが、3行目または4行目を追加するとどうなりますか？ ;） –

次に、相対位置と変換translateYを使ってdivとの垂直方向の配置を作成することができます。 [リンク]（https://jsfiddle.net/sf3dquLs/3/）。私はli要素の表示を表セルに変更するのが好きではありません。 – JohannesB

ありがとうRsauxil。サークル間にスペースを増やすことは可能ですか？ – PLAYCUBE

リスト内の円の中心にテキストを配置するにはどうすればよいですか？

答えて

関連する問題