私はいくつかの仕事のためにホームページを作ろうとしています。私は「ホーム」と言う素敵な小さなボタンを作りたいと思っています。しかし、私はまだonclickの実装のポイントではないので、それについて心配しないでください。私が望む形にしようとしました。CSSの形の中にテキストを中央に入れる方法
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 200px;
height: 100px;
text-align: center;
font-size: 25px;
}<div id = "home">Home</div>繰り返しますが、私はそれはそれの真ん中にあるように見えるような形状の内のテキスト「ホーム」を中心にしようとしています。
代わりの高さを使用してちょうどあなたが表示テーブルを使用することができます
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 200px;
line-height: 100px;
text-align: center;
font-size: 25px;
}<div id = "home">Home</div>ありがとう！それが私の必要なものです！ –
行の高さを使用します。
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 200px;
height: 100px;
text-align: center;
font-size: 25px;
display: table;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}<div id = "home">
<p>Home</p>
</div>私はflexboを考えますXこのコードをチェックし、あなたを助けるかもしれない：
#home{ background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
}<div id = "home">
<span>Home</span>
</div>はこれがあなたを助けている場合、私に教えてください。
display:flexアプローチを使用すると、テキストの中央と左から中央に配置できます。
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 200px;
height: 100px;
text-align: center;
font-size: 25px;
display:flex;
justify-content:center;
align-items:center;
}<div id="home">Home</div>また、正常に動作します。このため行の高さを使用することができます。ここに例があります、それがあなたを助けることを願っています。
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 25px;
}<div id = "home">Home</div>
あなたは完全なHTMLコードを追加することができますか？ – bxorcloud
あなたはそれを**水平でもveritcally **にも集中させたいのですか？ – Terry