CODEWITHSUNDEEP
cssbuttontextalignmentcenter
Pixie
Pixie

Reputation: 311

Why won't my button text align vertically in the middle of the button [CSS]?

I am trying to style with CSS my Navigation bar. I tried it previously with a table, which works fine, however I am now trying to do it with an un-ordered list and styling it. Whatever I do, the text does not go to the middle of the button.

I tried using:
- text-align: center;
- vertical-align: middle;
- position: absolute
- float:center

You may see the buttons in my code In this JSFiddle or below:

.mainheader nav {
    height: 85px;
    width: 100%;
    font-family: Calibri;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 41.55%; /* margin for Chrome */
    -moz-margin-start: 41.8%; /* margin for Mozilla firefox */
}

.mainheader nav ul{
    list-style:none;
    margin: 0 auto;
}

.mainheader nav ul li{
    float: left;
    display: inline;
}

Thanks a lot in advance for any ideas you might have.

Upvotes: 0

Views: 1237

Answers (3)

Matt
Matt

Reputation: 311

Another approach would be to wrap the button in a div, remove the float and make the margin auto. Working example: http: / /jsfiddle.net/madcowley/ondptw5h/

.centerme {
  width: 100%;
  text-align: center;
}
<div class="centerme">
 <img...
</div>

Also see here for some more explanation, in case it's helpful.

Upvotes: 0

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

You could change the code by removing the height and having just padding. Like this:

.mainheader nav a:link, .mainheader nav a:visited{
   color:#AB6F80;
   display: block;
   padding: 33px 20px;
   /* Come back here to assign height */

}

Or add line-height the same as height of the element.

Upvotes: 0

sinisake
sinisake

Reputation: 11328

.mainheader nav a:link, .mainheader nav a:visited{
    color:#AB6F80;
    display: block;
    padding: 7px 20px;
    /* Come back here to assign height */
    height:71px;
   line-height:71px;
}

line-height added - this will work fine with one line of text in link... http://jsfiddle.net/tbh62k9q/2/

Upvotes: 1

Related Questions