CODEWITHSUNDEEP
csscross-browser
Dancer
Dancer

Reputation: 17651

CSS Button - Vertically centre text

I have a Button that is a simple anchor tag styled with the following - 

.buyBtn{ 
   background:url(../images/buyBtn.png) no-repeat; 
   padding-top:4px; 
   width:97px;     
   height:28px; 
   margin-top:14px;
}
.buyBtn a{
   color:#fff!important; 
   font-weight:normal!important; 
   text-decoration:none;
   padding-left:27px;  
   padding-top:12px; 
   text-shadow:none!important;
}

I'm having problems vertically centering the text within the button, it appears fine in some devices, but off centre in others.

Can anybody recommend a way to fix this or a better solution to achieve the same result?

Cheers

Upvotes: 28

Views: 78675

Answers (6)

Amjad Abujamous
Amjad Abujamous

Reputation: 920

Flexbox helped me nail it. Assume you have an excel button (an anchor tag, really).

HTML

<a class="btn-excel" href="/Export/ExportListToExcel">
    Export To Excel
</a>

CSS

.btn-excel {
    background-color: #32CD32; /*lime green*/
    color: #fff;
    outline: none;
    border-radius: 0.3rem;
    text-decoration: none;
    width: 5rem;
    height: 2.5rem;
    /* Flex rules 'em all */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-excel:hover {
    background-color: #808000; /*olive*/
    cursor: pointer;
    text-decoration: none;
}

Upvotes: 11

Chanaka Amarasinghe
Chanaka Amarasinghe

Reputation: 3788

You can copy this code and put it as a CSS and adjust the things as you need

.btn-alignment{
    width: 88px;
    height: 40px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 40px;
    margin-top: 9px;
    text-align: center;
}

Upvotes: 1

Ariful Islam
Ariful Islam

Reputation: 7675

HTML:

<div class="buyBtn"><a href="#">Button</a></div>

CSS:

.buyBtn{ 
    background:url(../images/buyBtn.png) no-repeat; 
    width:97px;     
    height:28px; 
    display: table-cell;
    vertical-align: middle;
}

.buyBtn a{
    color:#fff!important; 
    font-weight:normal!important; 
    text-decoration:none;
    padding-left:27px;
    text-shadow:none!important;
}

No need to use padding-top or margin-top for vertical align. Just use display: table-cell; and vertical-align: middle;. Thats it.

Upvotes: 16

peduarte
peduarte

Reputation: 1677

I would use line-height as bchhun as mentioned. Also, padding-top & padding-bottom can help.

Upvotes: 1

J&#233;r&#233;my Dutheil
J&#233;r&#233;my Dutheil

Reputation: 6137

Did you try setting a font-size to your link ? Each browser probably has its own default size, so that may be an hint. Be careful too with padding and width/height, you need to decrease the block size if you add padding 'cause the padding is included in the width. For example, a simple block of 100px width without padding will have a size of 100px : ok. Add a padding-left: 10px; and your block now has a width of 110px. ;)

Upvotes: 0

bchhun
bchhun

Reputation: 18474

Use line-height to center it vertically. I usually use the same value as its height.

Upvotes: 39

Related Questions