ホームページ  >  記事  >  ウェブフロントエンド  >  フローティング div が水平方向の中央に配置されるのはなぜですか? _html/css_WEB-ITnose

フローティング div が水平方向の中央に配置されるのはなぜですか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:40:551803ブラウズ

div float

http://primetouchandfeel.com/ このアドレスに「prime touch and Feel」という言葉が入った画像があります。この画像をホームの下に置き、メニューの下のスライダーにフロートさせたいと思います。
これは、幅1085pxのdiv(id=float_logo)に画像を配置したものです。id=float_logoのdivは、親divの水平方向の中央に配置されます。結果は私のものではありません。このように考えると、id=float_logo の div が左揃えになります。
どうすればいいですか

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

left: width / 2 = 542px;

#float_logo {  height: 49px;  left: 542px;  position: absolute;  text-align: left;  top: 5px;  width: 1085px;  z-index: 101;}

结果不是我想的这样,id=float_logo的div是靠左对齐的。

絶対配置を使用しているため、位置を調整するには left と top を使用する必要があります。 。

CSS コード?1 id=float_logo の div が左揃えになってしまいました。
絶対配置を使用しているため、その位置を配置するには左と上を使用する必要があります。
ありがとうございます。絶対位置指定なしで実行できますか?

絶対位置指定を使用しても何も問題はありません。外側のレイヤーは相対的に配置され、内側の要素は完全に位置合わせされ、正確にレイアウトされます。これは非常に一般的な方法です。絶対位置決めに従うのが最善です

ここでの最善の方法は、絶対位置決めを使用することです。もう 1 つの方法は、相対位置決めを使用してその先頭を負の値に設定することですが、これら 2 つの絶対位置決めの方法の方が効率的です。結局のところ、相対的な位置決めには一定の副作用がある方が良いのです。

ここでのみ位置決めが使用できる理由は、要素の親要素が複数のノードを持つ場合、要素が 1 つしかない場合、親の高さと同じ方法で line-height を設定することで水平方向のセンタリングを実現できます。要素。垂直方向のセンタリングに関する記事を参照: http://www.blueidea.com/tech/web/2006/3231.asp

id=float_logo で div をラップし、それを中央揃えに設定するテーブルを作成するだけです。 table を使用するのが最善です

位置決めを使用しない場合は、DIV の align="center" を設定するか、親 DIV の text-align='center' を設定できます

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。