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

中国語と英語を中心とした div レイヤー コンテンツ_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:09:54
オリジナル
1181 人が閲覧しました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--#Layer1 {	position:absolute;	width:279px;	height:281px;	z-index:1;	height: 300px;	 text-align:center;     }--></style></head><body><div id="Layer1">fds fdsa fdsa fdsa fds a</div></body></html>
ログイン後にコピー


たとえば、この div レイヤーのように、レイヤー内のコンテンツを (中央揃えではなく) 中国語と英語で表示するにはどうすればよいですか。


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

vertical-align:middle を追加します

text-align:center を追加します。もちろん中央揃えです

text-align:center です。もちろん、中央に表示されます。
ボス、
意味がわからないかもしれませんが、中国語と英語のテキストを中央に表示するのではありません。層の真ん中に相当します。

vertical-align:middle を追加しても機能しません。最初にこれを試してみました

http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/

http://blog.163 。 com/zhaoyanping_1125/blog/static/20132915320120574238932/

レイヤーがあまり多くないのでしょうか？ ちょっと複雑な気がします

text-align:center:300px; 前者は水平方向に中央揃えで、後者は調整されます。行の高さを垂直方向の中央に設定します。コンテンツが 1 行しかないことが前提です。テキストがよくわからない場合は、

などのラベルを追加してから、jquery を使用することをお勧めします。ラベルの高さを取得し、CSS の上部の値を計算によって設定します。 。 。個人的な考え。 。 。 。


text-align:center; line-height:300px;

前者は水平方向に中央揃えであり、後者は行の高さが 1 行しかないことが前提です。テキストについては、

などのラベルを追加し、jqueryを使用してラベルの高さを取得し、計算によってCSSの上部の値を設定することをお勧めします。 。 。 。個人的な考え。 。 。 。

そうですね、Sina Weibo にアバターをアップロードするのと同じ効果が得られるのが最善です。写真が不規則な場合は、最もよく中国語と英語で表示されます。
最も一般的に使用される方法はあります。 line-height を使用します

++ 最も一般的に使用される方法は line-height を使用することです。これで完了です

水平方向の場合は簡単に解決できます: text-align:center; 垂直方向の中央揃えについては、依存します。状況について:

1: 単一行のテキスト: line-height を直接使用して実行します。

2: 現時点では、複数行のテキストや画像はより面倒です。一般的な方法は、div を複数のレイヤーにネストすることです。 table-cell の垂直方向のセンタリング機能と相対位置の追加は次のとおりです。 ; text-align:center}

.valign_wrap{*position:absolute;*top:50% ;}

.valign_content{*position:relative;*top:-50%;*left:-50%;display:inline- block;*display:inline;*zoom:1;text-align:left;}


< ;/div>


自分で解決しましたが、良いアイデアをありがとう):_

関連ラベル：
div层 内容居中英
ソース：php.cn
前の記事：w3c Web サイトで HTML を学習中にいくつかの問題が発生しました。解決してください。 _html/css_WEB-ITnose 次の記事：これは天に反することです。ブラウザの非互換性_html/css_WEB-ITnose の問題
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
DIV を両側のコンテンツに合わせて中央揃えにします したがって、(含まれる DIV 内に) 5 つの項目があります。項目の並びは以下の通りです。 テキスト 画像 DIV 画像 テキスト DIVを中心にして画像がDIVを「抱き締める」...
から 2024-04-04 23:19:14
0
1
3438
CSS セレクターを使用して、特定の属性またはタグを含む div 要素をターゲットにする方法は? 私はウェブサイトを生成する POS システムに取り組んでいます。コードのほとんどは独自仕様なので、あまり編集できません。いくつかの画像がカテゴリーとしてフローティングされたカテゴリ...
から 2024-04-03 22:25:59
0
1
277
画面上で何も中央揃えにできません CSS を使用して HTML 上に応答性の高いナビゲーション バーを作成する方法に関する YouTube チュートリアルに従っています。画面の中央にテキストを追加しようとすると、テ...
から 2024-04-01 11:51:40
0
2
303
Nuxt JS/Vue Jest がチェックするクラス名要素がページ上に存在することを確認してください 私は VueJS の Jest テスト スイートを初めて使用し、それを NuxtJS アプリケーションに統合しています。コンポーネントが Vue インスタンスであるかどうかを確認す...
から 2024-03-31 19:10:41
0
1
347
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート