61,111
社区成员
发帖
与我相关
我的任务
分享margin:auto 和 position:fixed不能同时使用么
这是我的CSS代码
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
position:fixed;
margin:auto;
z-index: 1;
}
图中的橙色块怎么也居中不了
我尝试过修改代码的次序，也试过不要overflow，z-index等代码，还是没有解决问题
希望各位帮忙解决一下，谢谢！
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
position:fixed;
margin:auto;
z-index: 1;
}
图中的橙色块怎么也居中不了
我尝试过修改代码的次序，也试过不要overflow，z-index等代码，还是没有解决问题
希望各位帮忙解决一下，谢谢！
...全文
请发表友善的回复…
发表回复
hear_windows 2014-05-15
- 打赏
- 举报
确实可行，不过我想请教一下，
text-align不是对文字进行居中处理的吗？
孟子E章 2014-05-15
- 打赏
- 举报
如果完全居中，你还可以加上
html,body{text-align:center}
孟子E章 2014-05-15
- 打赏
- 举报
改成
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
margin: auto;
position: fixed;
z-index: 1;
left:0px;right:0px;
}
即可
hear_windows 2014-05-15
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<title>First html</title>
<link type="text/css" rel="stylesheet" href="css.css">
<head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</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;
}
hear_windows 2014-05-15
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<title>First html</title>
<link type="text/css" rel="stylesheet" href="css.css">
<head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</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;
}
孟子E章 2014-05-15
- 打赏
- 举报
贴你完整的html和css
