コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > センタリングの問題については、master_html/css_WEB-ITnose に問い合わせてください。

センタリングの問題については、master_html/css_WEB-ITnose に問い合わせてください。

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

<style type="text/css">body{	text-align:center;}li{	background-image:url(images/btn3.jpg);	float:left;	list-style-type:none;	width:155px;	height:58px;	text-align:center;	color:#F09;	font-weight:bold;	font-size:16px;	font-family:Arial, Helvetica, sans-serif;}</style></head><ul>    <li></br>Gift</li>    <li></br>I,Say</li>    <li></br>Photo</li>    <li></br>Letter</li></ul>
ログイン後にコピー

このliはまだ中央に配置できません。さまざまな方法を試しました。助けてください。ページ上のボタンの位置を制御する方法は、CSSが使いにくいようです。または私の使い方が間違っています


ディスカッションへの返信（解決策）

float:left; は、ドキュメントフローをエスケープしているため、中央に表示されません

dispaly:inline; に変更してみましたが、ありません。フローティングエフェクト ああ、li の背景画像を削除したら中央に配置できました。どうなりましたか?

ul の外側に div を追加し、幅を設定してから、この場合は ul 全体が入るはずです。ショーの途中です

フロートの後に UL をクリアするのが最善です



    ギフト
    /br>レター


スタイルの float:left; を削除して、display: inline-block; を使用します。これで完了です。

ul width を指定し、position:relative を使用して完了です。使いやすいです。ありがとうございます。

関連ラベル：
居中问题，求大神
ソース：php.cn
前の記事：モバイル Web のサイズの問題front-end_html/css_WEB-ITnose 次の記事：ヘルプ css Expert_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
Imagick、Adobe Photoshop、Windows の比較 - 解像度の検出 (1 センチメートルあたりのピクセル数またはインチあたりのピクセル数) これは質問ではなく、DPI がさまざまなファイル形式でどのように保存されるかについての理解を深め、なぜ DPI が機能するのかを議論する試みです。私は画像 (JPG、PNG、Tif...
から 2024-04-06 16:01:27
0
1
397
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
ツールチップを相対的な親に揃える この問題を解決するために 2 日間を費やしましたが、一人では解決できないことに気づきました。親を基準にしてツールチップを中央に配置しようとしています。これは私のコードです =>...
から 2024-04-06 13:16:59
0
2
394
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート