试图居中链接在顶部标题的CSS链接，但不会移动

你好，我试图保持棕褐色边缘的中心链接。我如何让它以棕褐色边缘为中心？我尝试了一些东西，但边缘不会移动。试图居中链接在顶部标题的CSS链接，但不会移动

这是网站

柜面你想看到的视觉。

我不知道为什么链接不希望当我用利润率左或边距移动

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>

来源

2013-11-27 user3466255

你们是不是要垂直对齐到中间的链接似乎在此刻水平居中 – grimmus

如果您想要垂直对齐链接：

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

来源

2013-11-27 15:08:48 Jop

哇这么简单的事情谢谢你们这么多家伙！ – user3466255

添加这#header

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

另外，还要检查demo。

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

来源

2013-11-27 15:12:35 LinkinTED

一般提示：随时添加line-height等于div的高度对齐垂直中间位置

在#header aline-height:80px;您的链接会为你做的工作！ :)

来源

2013-11-27 15:12:52 NoobEditor

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

注：top: 50%莫名其妙使用height和家长的margin。

来源

2013-11-27 15:25:04 luca

你也可以这样做：在里面创建一个div（我叫它链接），你可以从其他div格式化。边距不会显示，因为文本是内联的，并且不能给内联文本提供顶部和底部边距。将它改为显示：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

来源

2013-11-27 15:26:20

试图居中链接在顶部标题的CSS链接，但不会移动

回答

相关问题