试图将 CSS 中的链接与顶部标题居中但不会移动答案

【问题标题】：Trying to center a link in CSS with the top header but wont move试图将 CSS 中的链接与顶部标题居中但不会移动
【发布时间】：2013-12-13 07:09:45
【问题描述】：

您好，我正在尝试将链接保持在棕褐色边距的中心。我如何让它以棕褐色边缘为中心？我已经尝试了一些方法，但边距不会移动。

如果您想直观地看到问题，这里是网站：

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>

【问题讨论】：

您是否要垂直对齐到中间？链接目前似乎水平居中。

标签： javascript html asp.net css cascadingdropdown

【解决方案1】：

您也可以这样做：在内部创建一个 div（我称之为链接），您可以在其他 div 之外对其进行格式化。边距不显示，因为文本是内联的，并且您不能为内联文本提供顶部和底部边距。将其更改为 display: inline-block 和 position: relative 允许您更改 div 的位置（如果您不想设置行高）。顶部：36% 会将其居中，因为这会计算边距（因此您想要 80/110 像素的一半，或 4/11 = ~36%（您可以通过将边距添加到下方对象来使其达到 50%）。

HTML：

<div id="links"><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>

CSS：

#header a {
  border: 3px solid green;
  margin-left: 40px;
  margin-right: 40px;
}

#links {
  display: inline-block;
  position: relative;
  top: 36%;
}

http://codepen.io/anon/pen/vbJkg

【讨论】：

【解决方案2】：

#header a {
    border: 3px solid #008000;
    display: inline-block;
    margin: 0 40px;
    position: relative;
    top: 50%;  
}

注意：top: 50% 以某种方式使用父级的height 和 margin。

【讨论】：

【解决方案3】：

如果你想垂直对齐链接：

    #header a {
  ...
  line-height: 80px;
}

【讨论】：

【解决方案4】：

一般提示：始终添加等于div 的高度的line-height 以使您的链接在垂直中间位置对齐

line-height:80px; in #header a 会为您完成这项工作！ :)

【讨论】：

【解决方案5】：

将此添加到#header

#header {
   ....
   line-height: 80px;
   vertical-align: middle;
}

同时检查demo。

请注意，这可能会给您带来麻烦如果你想要的菜单行。

【讨论】：