在div中居中链接

时间：2017-08-01 05:16:16

标签： html css

我已经尝试了堆栈溢出的所有其他想法，没有什么对我有用 - 所以我开始认为我错过了一些愚蠢的东西。我想要做的就是在div标签中居中一个链接标签。我尝试过左右自动边距，以及文本对齐等。你看到我忽略了一个错误吗？这些链接位于一个div中，标题为id。

#header a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 75px;
  text-align: center;
}
<ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
</ul>

10 个答案:

答案 0 :(得分：1)

问题在于ul有关于对齐元素的想法。请参阅this thread关于居中ul和div。

要删除ul标记的默认填充和边距，请尝试：

#menu {
    text-align: center;
    margin: 0;
    padding: 0;
}

然后，如果要水平显示彼此相邻的链接，则必须更改li标记的默认行为，例如如下所示：

.menuItem {
    display: inline-block;
}

答案 1 :(得分：1)

我认为你正在寻找这个 -

＆＃13;
＆＃13; 
#header a {
    font-size: 25px;
    color: black;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    line-height: 75px;
    text-align: center;
}
ul {
    text-align: center;
    margin:0;
    padding:0;
}
ul li {
    display: inline-block
}
＆＃13; 
<ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

这是另一种解决方案，它可以帮助你 -

＆＃13;
＆＃13; 
#header a {
    font-size: 25px;
    color: black;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    line-height: 75px;
    text-align: center;
}
ul {
    padding: 0;
    margin: 0
}
ul li {
    max-width: 60px;
    margin: 0 auto;
}
＆＃13; 
<ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试添加如下所示的显示块。

#header a{display:block}

答案 3 :(得分：0)

我不确定您的CSS用途是什么，但要将链接集中在您需要的所有内容text-align: center列表中。

#header a {
  font-size: 25px;
  color: black;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 75px;
  text-align: center;
}

li {
  width: 200px;
  text-align: center;
}
<ul id="menu">
  <li class="menuItem"> <a href="home.html">Home</a> </li>
  <li class="menuItem"> <a href="music.html">Music</a> </li>
  <li class="menuItem"> <a href="services.=html">Services</a> </li>
  <li class="menuItem"> <a href="contact.html">Contact</a> </li>
  <li class="menuItem"> <a href="bio.html">Bio</a> </li>
</ul>

答案 4 :(得分：0)

试试这个

 #menu li { text-align: center; }

答案 5 :(得分：0)

将text-align:center设置为父

#menu li {
  text-align: center;
}

＆＃13;
＆＃13; 
#menu li {
 text-align: center;
}
#menu a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  line-height: 75px;
  
}
＆＃13; 
<ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

试试这个css，

.menuItem {
  margin:auto;
  text-align:center;
  list-style-type:none;
}
#header a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  line-height: 75px; 
}

希望这会有所帮助。

答案 7 :(得分：0)

准备好运行以下代码和您的答案

ul#menu{text-align: center;list-style:none;}

ul#menu li a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 75px;
  
}
<ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
</ul>

答案 8 :(得分：0)

如果您希望项目成为视野，请使用以下代码： 

.center {
  text-align: center;
}

ul li {
  display: inline-block;
}


#header a {
  font-size: 25px;
  color: black;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 75px;
  text-align: center;
}

.center {
  text-align: center;
}

ul li {
  display: inline-block;
}
<div class="center">
  <ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
  </ul>
</div>

如果您希望项目是垂直的，只需使用以下代码： 

.center {
  text-align: center;
}


#header a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 75px;
  text-align: center;
}

.center {
  text-align: center;
}

ul {
  list-style: none;
}
<div class="center">
  <ul id="menu">
    <li class="menuItem"><a href="home.html">Home</a></li>
    <li class="menuItem"><a href="music.html">Music</a></li>
    <li class="menuItem"><a href="services.=html">Services</a></li>
    <li class="menuItem"><a href="contact.html">Contact</a></li>
    <li class="menuItem"><a href="bio.html">Bio</a></li>
  </ul>
</div>

答案 9 :(得分：0)

首先你应该知道＆＃34; a＆＃34;标签有＆＃34;内联 - 块＆＃34;行为 这意味着你应该像文字或图像一样对待它 文字只是以＆＃34; text-align：center＆＃34;

为中心

＆＃13;
＆＃13; 
ul,li {
  padding: inherit; 
}   
#menu {
  text-align: center;
}
#header a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  line-height: 75px;       
}
＆＃13; 
    <ul id="menu">
        <li class="menuItem"><a href="home.html">Home</a></li>
        <li class="menuItem"><a href="music.html">Music</a></li>
        <li class="menuItem"><a href="services.=html">Services</a></li>
        <li class="menuItem"><a href="contact.html">Contact</a></li>
        <li class="menuItem"><a href="bio.html">Bio</a></li>
    </ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题