CODEWITHSUNDEEP
htmlcss
Taylor Barton
Taylor Barton

Reputation: 45

Centering a link in a div

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>

Upvotes: 0

Views: 431

Answers (10)

mohammad pourskandar
mohammad pourskandar

Reputation: 1

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>

Upvotes: 0

Aydin4ik
Aydin4ik

Reputation: 1935

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

Upvotes: 1

Ehsan
Ehsan

Reputation: 12969

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>

Upvotes: 0

Ajay Malik
Ajay Malik

Reputation: 329

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>

Upvotes: 0

Maanu
Maanu

Reputation: 1085

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.

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

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>

Upvotes: 1

PANDA MAN
PANDA MAN

Reputation: 202

try this 

 #menu li { text-align: center; }

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8407

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>

Upvotes: 0

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 0

Lime
Lime

Reputation: 13569

Try adding display block like the following.

#header a{display:block}

Upvotes: 0

Related Questions