コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

下の図の赤い部分（スパン）のテキストを垂直方向の中央に配置するにはどうすればよいですか？ソースコードは以下の通り、画像は2階_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:55:49
オリジナル
1111 人が閲覧しました

;<国名

中国

米国




注: スパンの行の高さは div と同じ高さに設定されています。赤い部分がまだまっすぐに中心に合わせられないので、アドバイスをお願いします。どうもありがとうございます！


ディスカッションへの返信(解決策)



垂直整列セット?

注: スパンの line-height 属性を div と同じ高さに設定しましたが、赤い部分 (スパン) のテキストを赤い部分に対して垂直方向に中央揃えにすることはできません。アドバイス！どうもありがとうございます！ 

<div id="divMain"  style="width:100%;height:25px; border:solid 1px #000000; text-align:center;" ><span style="float: left;"><国家名称</span>   	 <span class="spanChina" style="width:104px;background:#FF0000; padding-bottom:5px; margin-right:-2px;line-height:25px;" ><span style="vertical-align: middle;">中国</span></span>    	<span class="spanAmeran" style="width:104px;background:#FF0000;padding-bottom:5px; margin-left:-2px;line-height:25px;"><span style="vertical-align: middle;">美国</span></span>  	 <span style="float:right;"><img  id="imgClose" src="../../../img/closePage.png" /> </span></div>
ログイン後にコピー

...display:inline-block;vertical-align:middle; をスタイルに追加します

関連ラベル：
如何让下图中的红色部分（span）内的文字相对于红色部分竖直方向上居中呢？源代码如下，图在第二楼
ソース：php.cn
前の記事：meta之renderer_html/css_WEB-ITnose 次の記事：js HTML ページのカウントダウンは秒まで正確_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1910
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2081
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1754
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1653
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1661
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート