Javascript 尝试将CSS中的链接与顶部标题居中，但不会移动_Javascript_Html_Asp.net_Css_Cascadingdropdown

Javascript 尝试将CSS中的链接与顶部标题居中，但不会移动

javascript html asp.net css

Javascript 尝试将CSS中的链接与顶部标题居中，但不会移动,javascript,html,asp.net,css,cascadingdropdown,Javascript,Html,Asp.net,Css,Cascadingdropdown,您好，我正在努力保持链接的中间谭空白。如何使其居中至棕褐色边缘？我试过一些方法，但利润率不会改变如果您想直观地看到问题，请访问以下网站：我不知道为什么链接不想移动时，我使用左边距或边距顶部 css是 #header{ background-color: tan; width: 90%; Height: 80px; margin: auto; margin-bottom: 30px; text-align: center; } #header a { margi

您好，我正在努力保持链接的中间谭空白。如何使其居中至棕褐色边缘？我试过一些方法，但利润率不会改变

如果您想直观地看到问题，请访问以下网站：

我不知道为什么链接不想移动时，我使用左边距或边距顶部

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>


JSP页面
左
对
麦克洛姆
你好，怎么了

如果要垂直对齐链接：

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

将此添加到

#标题中

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

同时，请检查

请注意，如果您想调整菜单的行数，这可能会带来麻烦。

一般提示：始终添加

行高

等于

div

的高度，以便将链接在垂直中间位置对齐

行高：80px#标题a中的code>将为您完成此工作：）
注意：top:50%
以某种方式使用了父级的高度和边距。
您也可以这样做：在内部创建一个div（我称之为links），您可以将其格式化为远离其他div的格式。边距不会显示，因为文本是内联的，而且不能为内联文本提供上下边距。将其更改为display:inline block和position:relative可以更改div的位置（如果不想设置行高）。顶部：36%将居中，因为这会计算边距（因此您需要80/110像素的一半，或4/11=~36%（您可以通过将边距添加到下面的对象来实现50%）
HTML:
您是否试图垂直对齐到中间位置？此时链接似乎处于水平居中位置。
#header a {
    border: 3px solid #008000;
    display: inline-block;
    margin: 0 40px;
    position: relative;
    top: 50%;  
}

<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>

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

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