您好，我正在努力使链接保持在棕褐色边距的中央。我如何让它以棕褐色边缘为中心？我已经尝试了一些方法，但边距不会移动。
如果您想直观地查看问题，请访问以下网站:
http://codepen.io/willc86/pen/hpFLe
我不确定为什么当我使用 margin-left 或 margin-top 时链接不想移动
CSS 是
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
我的 html 是
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
<a href="http:www.facebook.com"> Facebook </a>
<a href="http:www.facebook.com"> Google </a>
<a href="http:www.facebook.com"> Yahoo </a>
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
最佳答案
将此添加到 #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
同时检查 demo .
请注意，如果您想要多行菜单，这可能会给您带来麻烦。
关于javascript - 尝试将 CSS 中的链接与顶部标题居中但不会移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20245917/