ホームページ > ウェブフロントエンド > htmlチュートリアル > 水平方向の中央揃えを実現するにはどうすればよいですか? _html/css_WEB-ITnose

水平方向の中央揃えを実現するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:08:45
オリジナル
1439 人が閲覧しました

我经常看到有人说margin-left和margin-right设置为auto就能水平方向中间对齐。
或者设置center里面的内容就能对齐。
能给我解释解释margin-left和margin-right设置为auto,align设置为center和center标签的水平方向对齐有什么不一样吗?
为什么我下面这个例子我用了这么多对齐方式它就是不水平方向中间对齐呢?


    

    
    
    
    
    
    
    
    
    
    
    
    
    
房间号:
空调:

    


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

一般に、ブロックレベルの要素は margin: 0 auto; を使用します

要素内のテキストは text-align:center を使用します

margin: 0 auto とpadding を使用します: 0 同時に自動

どのブラウザを使用していますか? IEとFirefoxで比較すると、水平方向に中央揃えになっているものがあるはずです

margin: 0 autoとpadding: 0 autoを同時に使用する必要があります

どのブラウザを使用していますか? IEとFirefoxに切り替えて比較すると、水平方向に中央揃えになっているはずです
まだ動作しません

text-align=centerを使用してください

2階のlixinstudioからの返信を引用:


margin: 0 autoとpadding: 0 autoを使用してください
どのブラウザを使用していますか? IEとFirefoxで比較してみたところ、水平方向に中央揃えになるはずです

まだ動作しません
margin: 0 autoとpadding: 0 autoを使用してもdivが整列できません IE 8とFirefox 9を使用しています。人 margin-left と margin-right を auto に設定すると、中央に横に配置できます。
または、コンテンツを中央に配置して配置します。

margin-left と margin-right を auto に設定すること、align を center に設定すること、および中央ラベルの水平方向の配置の違いを説明してもらえますか?

以下の例では非常に多くの配置方法を使用しているのに、中央で水平に配置されないのはなぜですか?

整列の方法はわかっていますが、div の margin: 0 auto と padding: 0 auto を設定するとテーブル全体の中央を整列できない理由がわかりません。
ただそれを理解しようとしているだけです。

テーブルは中央に配置されます。 がコンテナの中央に配置されている限り、外側に div を追加する必要はありません。他には何も試していません。とにかくそれらを揃える方法があります。
その他の配置はブラウザごとに異なるため、個別にテストする必要があります。

margin:0 auto; もちろん、効果を確認するには、現在のレイヤーの幅が前のレイヤーよりも小さい必要があります。

有効にするには、width, margin: 0 auto; を定義する必要がある場合があります

このページのソース コードである csdn フォーラムを見てください。

body の

#bbscsdn_wrap {

background:white;
width: 960px;
margin: 0 auto;

width を設定せずに絶対

を使用したため、

を使用できます。水平方向のセンタリングを実現するには左のみを使用してください。

Position:absolute を使用したため、水平方向のセンタリングを実現するには left のみを使用できます。

左とはどういう意味ですか?

Position:absolute を使用したため、水平方向のセンタリングを実現するには left のみを使用できます。

ポジションの左側のことですか?


13 階の yueshangchuanqi からの返信を引用します:

Position:absolute を使用したため、水平方向のセンタリングを実現するには left のみを使用できます。

ポジションの左側のことですか?


さて、上の返信で説明しました。

16 階のrosecshly0928 さんの返信より引用:
13 階 yueshangchuanqi さんの返信より引用:

Position:absolute を使用したため、水平方向のセンタリングを実現するには left のみを使用できます。

ポジションの左ということですか?


さて、上の返信で説明しました。
ありがとうございます。絶対を使用すると、これを削除するか、左に設定すると整列することができるので、試してみました。

17 階 yueshangchuanqi の返信からの引用:

16 階 Rosecshly0928 の返信からの引用:
13 階 yueshangchuanqi の返信からの引用:

Position:absolute を使用しているため、水平方向のセンタリングを実現するには left のみを使用できます。

ポジションの左側のことですか?


さて、上の返信で説明しました。

ありがとう、absolu を使ったからといって試してみたのですが…

ははは、解決しました。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート