ホームページ >ウェブフロントエンド >htmlチュートリアル >margin:auto とposition:fixed を同時に使用することはできません_html/css_WEB-ITnose

margin:auto とposition:fixed を同時に使用することはできません_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:04:271419ブラウズ

这是我的CSS代码
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
position:fixed;
margin:auto;
z-index: 1;
}

图中的橙色块怎么也居中不了
我尝试过修改代码的次序,也试过不要overflow,z-index等代码,还是没有解决问题
希望各位帮忙解决一下,谢谢!


回复讨论(解决方案)

贴你完整的html和css




First html










-------------------------------------------------------------------------------------
div {
border-radius: 5px;
}

#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
margin: auto;
position: fixed;
z-index: 1;
}

.left {
width: 25%;
height: 360px;
background-color: gold;
margin-top: 70px;
margin-left: 5%;
position: relative;
display: inline-block;
}

.right {
width: 60%;
height: 360px;
background-color: #A9A9A9;
margin-top: 70px;
margin-right: 5%;
position: relative;
display: inline-block;
}

#footer {
width: 90%;
height: 50px;
background-color: #00FF00;
margin: auto;
margin-top: 20px;
position: relative;
clear: both;
}

贴你完整的html和css





First html










----------------------------------------------- ------------------------------------
div {
border-radius: 5px;
}

#header {
width: 90%;
高さ: 50ピクセル;
背景色: オレンジ;
オーバーフロー: 自動;
マージン: 自動;
位置: 固定。
z インデックス: 1;
}

.left {
width: 25%;
高さ: 360ピクセル;
背景色: ゴールド;
マージントップ: 70px;
マージン左: 5%;
位置: 相対的。
表示: インラインブロック;
}

.right {
幅: 60%;
高さ: 360ピクセル;
背景色: #A9A9A9;
マージントップ: 70px;
マージン右: 5%;
位置: 相対的。
表示: インラインブロック;
}

#footer {
width: 90%;
高さ: 50ピクセル;
背景色: #00FF00;
マージン: 自動;
マージントップ: 20px;
位置: 相対的。
クリア: 両方。
}

変更
#header {
width: 90%;
高さ: 50ピクセル;
背景色: オレンジ;
オーバーフロー: 自動;
マージン: 自動;
位置: 固定。
z インデックス: 1;
左:0ピクセル;右:0ピクセル;
}
即可

如果完全居中、你还可上
html,body{text-align:center}

如果完全居中、你还可上
html,body{text-align:center}


确实可行,不过我想请教一下,
text-align不是对文字进行居中处理的吗?
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。