Q&A
質問の答えにはならないかもしれませんが、span はデフォルトのままなら inline 要素なので height は効いていないと思います。display: inline-block; にしたらどうなりますか？
下記のスクリーンショットを見ていただきたいのですが、メインビジュアルの中に角丸の帯の中に文字を配置したのですが、上下中央にならず若干文字が下がっていると思われます。
スクリーンショット内でカーソルが乗っている部分のcssが右下の緑の枠線の中になります。
大まかにやっていることとしましては
html
1<span>ITコンサル手イング</span>
css
1span { 2height: 74px; 3line-height: 74px; 4width: 300px; 5text-align: center; 6border-radius: 50px; 7}
こんな感じで、heightとline-heightの値を同じにして、上下中央にしようとしました。
しかし、上下中央より若干下がっていると思われます。
こういったものはどうしたらいいのかご教授頂きたいです。
よろしくお願いいたします。
display: inline-block;や背景色や文字サイズの指定を追加しても
そのコードだと質問の現象を再現できませんよね？
ITコンサル手イングになっていますし、投稿前にご自身で確認されましたか？
スクリーンショット以外のコードは、実際のコードではなくこんなコーディングをしましたというあくまで説明になっています。
スクリーンショットではinlile-blockも追加しております。
htmlでいうと、こちらが、スクリーンショットのコードになっています。
<h2><span>ITコンサルティング</span><br><span>×</span><br><span>WEBサイト改善</span></h2>
コメント欄での返信はなく、質問のソースを修正した方がいいと思いますよ。。。
回答3件
0
フォント自体も上下の余白を持っていて、フォントごとに異なります。
CSS
1font-family: "ＭＳ ゴシック";
を試してみてください。
投稿2022/01/29 10:55
総合スコア8402
0
html
1<div id="sample1"> 2 <span>ITコンサルティング</span> 3</div> 4 5<div id="sample2"> 6 <span>ITコンサルティング</span> 7</div>
css
1div { 2 display: inline-block; 3 background: #ddd; 4} 5#sample1 span { 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 width: 300px; 10 height: 74px; 11 margin: 20px; 12 border-radius: 50px; 13 background: #99f; 14 font-family: sans-serif; 15 font-size: 30px; 16} 17#sample2 span { 18 display: block; 19 margin: 20px; 20 padding: 20px; 21 border-radius: 50px; 22 background: #f99; 23 font-family: sans-serif; 24 font-size: 30px; 25}
先の回答で flex に言及されていたので flex を用いたものと、より簡単な padding を用いたサンプルを書いてみました。
width, height を固定させる必要がないのであれば padding を用いた方が楽です。
しかしながら flex は強力なので、より複雑な場面でも期待通り中央揃えさせるために flex は役に立つでしょう。
投稿2022/01/28 20:36
総合スコア2859
こちらの質問にまで回答いただきまして、本当にありがとうございます。
ですが、頂いたものを見てもやはり上下中央になっていませんでした。試しにphotoshopで開き、長さなど測ってみても上下の余白の高さが違いました。
失礼ながら回答欄には画像が添付できませんでしたので、勝手にこちらの質問文に新たにphotoshopで編集したcodepenのスクリーンショットを添付いたしましたので、もしわかれば解決策をご教授頂きたいです。
私が気にしすぎなのかもしれません。
一番したのスクリーンショットは
<div>
<h3>Q.改善の期間はどのくらいですか？<h3>
</div>
というhtmlでして、そちらにcssで
div {
display: flex;
align-items: center;
}
としたものですが、h2要素は上下真ん中になっているものの、検証モードでスクリーンショット内のカーソルがふれて、薄紺色になっている部分の中では上下中央になっていませんので、こういったことが、原因になっていると思われます。
flexはしっかりと効いているのですが、子要素の中で上下中央になっていないのだと思います。
すいません、下の方の回答でも新たに画像を追加しましたので、すぐ上の内容は下から2番目の画像になります。
> ですが、頂いたものを見てもやはり上下中央になっていませんでした。試しにphotoshopで開き、長さなど測ってみても上下の余白の高さが違いました。
なるほど、そこがずれることにこだわっている質問ということを理解しました。
残念ながらWebブラウザやCSSの仕様では、そのズレまで期待通り調整することができません。Webとはそういうものです。デザイナーにWebの特性を理解してもらう必要があるかもしれません。
（グラフィックではなく）テキストとCSSで文字を描画させる場合、`font-family` や `font-size` を指定したとしても、閲覧者のブラウザや環境によっては（ピクセル単位での）描画が、開発者（あなた）が確認した描画結果と異なることがあります。
つまり、（欧文・和文における基準線と描画に関する）この程度のズレは文字をテキストデータとして扱う以上、気にすべきものではないということです。
もし、提示されているスクリーンショットのズレが気になる（そこまでデザインの再現度が求められる）のであれば、こういう場合は画像（img, svg）か `canvas` 要素での表示を検討すべきです。
あるいは、どうしてもテキストでやりたければ、厳密な等幅間隔の余白を諦めて 1px 単位で上下 padding を調整するくらいしか手段がありません。
> <h3>Q.改善の期間はどのくらいですか？<h3>
これのスクリーンショットはもう少し何とかなると思いますが、なぜ下揃えになってしまっているのでしょう。CodePenなどで実物が確認できればアドバイスできるかもしれません。
0
同じ現象が再現できないので根本原因はわからないのですが、下記でどうでしょうか。
CSS
1span { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 height: 74px; 6 width: 300px; 7 border-radius: 50px; 8 background-color: gray; 9}
投稿2022/01/28 16:12
総合スコア8402
ご回答ありがとうございます。
spanの中には子要素はないのですが、flexって機能するのでしょうか？
機能していました。やってみてください。ルールとして正しいかどうかはわかりません。不安ならdiv要素でも加えれば良いでしょう。
itagagaki様ご回答ありがとうございます。
頂いたコードをcodepenで再現してみたのですが、若干上下の余白の長さが違いました。
https://codepen.io/xlsge/pen/PoOPzBL
codepennをphotoshopで編集したスクリーンショット質問文の一番下に貼っておきます。
上のご回答いただいた方と同じようなコードだと思うのですが、これくらいは許容すべきですかね？
同じコードなのに上の方のほうが大きくずれているのはなぜなんだろうと腑に落ちない感じはいたしますが
あなたの回答
tips
プレビュー
