質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4956閲覧

文字を背景の真ん中に設置したい

tayusan

総合スコア3

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/22 14:20

背景の上にリンク文字を書いているのですが背景の高さを文字に合わせるにはどうしらいいのでしょうか。文字が背景の上部に表示されているのを真ん中にしたいです。
html

<body> <div class="menu_botan"><a href="#" target="_blank">メニューを見る </a></div> </body>

.scc

.menu_botan{
background-color:green;
width:150px;
height:40px;
text-align:center;
border-radius:10px;

}
.menu_botan a{

text-decoration:none;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

中央寄せする方法はいろいろあります。
場合によって適切な方法を選べるようにそれぞれを理解しておくといいでしょう。

例えば、

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
とか
CSSで中央寄せの方法いろいろメモ - Qiita

親要素のheightと子要素のline-heightを同じにするいう方法もありますが、テキストがおり返して2行になった場合、親要素からはみ出ます。

とりあえず現状、最強なのは、Flexboxを使う方法です。

css

1.menu_botan{ 2 background-color:green; 3 width:150px; 4 height:40px; 5 text-align:center; 6 border-radius:10px; 7 display: flex; /**/ 8 align-items: center; /* 上下中央寄せ */ 9} 10.menu_botan a{ 11 text-decoration:none; 12}

まずはFlexboxを試してみて、それでうまくいかない場合は、他の方法をトライしてみるといいでしょう。

投稿2021/01/22 17:32

hatena19

総合スコア33699

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tayusan

2021/01/22 20:47

ありがとうございます。いろいろな方法で試してみます。感謝!
guest

0

heightline-heightを使うことで調節できます

投稿2021/01/22 16:59

modieu

総合スコア282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tayusan

2021/01/22 20:47

ありがとうございます。いろいろな方法で試してみます。感謝
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問