0

I have tried all the other ideas on stack Overflow, and nothing is working for me - so I'm starting to think i'm missing something silly. All I am trying to do is center a link tag in a div tag. I have tried doing right and left auto margins, as well as text align etc. Do you see an error I have overlooked? The links are inside a div with the id of header.

#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>
Hash
  • 7,726
  • 9
  • 34
  • 53
Taylor Barton
  • 45
  • 2
  • 10

10 Answers10

1

The issue is that ul has its own ideas about aligning elements. See this thread on centering ul withing div.

To get rid of the default padding and margin of the ul tag, try:

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

Then, if you would like to display the links next to each other horizontally, you have to alter the default behaviour of the li tags, for example as following:

.menuItem {
    display: inline-block;
}
Aydin4ik
  • 1,782
  • 1
  • 14
  • 19
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/16892440) – Nikolaj Dam Larsen Aug 01 '17 at 05:55
  • 1
    Thank you Nikolaj, duly noted and edited accordingly. – Aydin4ik Aug 01 '17 at 06:28
1

I think you are looking for this -

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

Here is another solution may it will helps you-

#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;
}
<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>
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
0

Try adding display block like the following.

#header a{display:block}
Lime
  • 13,400
  • 11
  • 56
  • 88
0

I'm not sure what your CSS is for, but to center the link all you need is text-align: center for the list.

#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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

try this 

 #menu li { text-align: center; }
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
PANDA MAN
  • 172
  • 1
  • 16
0

set text-align:center to the parent

#menu li {
  text-align: center;
}


#menu li {
 text-align: center;
}
#menu a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  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>
Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
0

Try this css, 

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

hope this helps.

Maanu
  • 945
  • 1
  • 6
  • 10
0

Run Below Code and Your Answer in ready

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>
Ajay Malik
  • 325
  • 4
  • 17
0

IF you want items be horizontaly, use this code :

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

IF you want items be vertically, just use this code :

.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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
0

first of all you should know that "a" tag has "inline--block" behavior that means you should treat it like a text or image text simply come in center with "text-align : center"

ul,li {
  padding: inherit; 
}   
#menu {
  text-align: center;
}
#header a{
  font-size: 25px;
  color: black;
  text-decoration: none;
  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>
mohammad pourskandar
  • 1
  • 2