Home > Web Front-end > HTML Tutorial > Can't margin:auto and position:fixed be used at the same time_html/css_WEB-ITnose

Can't margin:auto and position:fixed be used at the same time_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:04:27
Original
1417 people have browsed it

这是我的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%;
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;
}

改成
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
margin: auto;
position: fixed;
z-index: 1;
left:0px;right:0px;
}
即可

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

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


确实可行,不过我想请教一下,
text-align不是对文字进行居中处理的吗?
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template