Center text in a "button"

HTML & CSS
1

I have a top bar with a button (not an html button) like this:

<div id="top-bar">
              <div id="btn-register" class="rounded ">
                   <a href="#">Registo</a>
              </div>

          </div>


#btn-register
{
     margin:7px 50px 0px 0px; //just some positioning margins
}

.rounded
{
    border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

My question is: how can i center vertically the text of the button?.

2

Hi

Paul O’B wrote a great (sticky) post regarding centering elements on this link. By the end of reading it you will have all info you need regarding centering.

Regards,
Steve

3

This should be of some use :wink:

4

Here are a few methods to vertically align the text in a button. :slight_smile:

I recommend the method used in the first example as the most accurate:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
div{ margin:50px; border:2px solid; width:250px; text-align:center}
a{ text-decoration:none; text-transform:uppercase}

/* in a fix height button; vertical centre by padding and negative margin (stays precisely on set level in all browsers also at extreme font-size changes) */
#button1{
	padding-top:20px; /* push the link down to the vertical centre of button (by half the total height) */
	height:20px;
	background:url(golden.png);
}
#button1 a{
	display:block;
	margin-top:-.6em; /* pull the link up by half the line-height to centre vertically in the button */
	line-height:1.2;
}

/* in a fix height button; vertical centre by padding and negative margin both on the child (works the same as above except in a collapsing margins case) */
#button2{
	overflow:hidden; /* avoid collaqpsing margins with the child by e.g: floating/top padding/top border/overflow */
	height:40px;
	background:url(golden.png);
}
#button2 a{
	display:block;
	margin-top:-.6em; /* pull the box up by half the line-height to centre vertically in the button (remember avoid a case of collapsing margins in good browsers) */
	padding-top:20px; /* push the text down to the vertical centre of button (half the total height) */
	line-height:1.2;
}

/* in a fix height button; vertical centre by vertical-align, (comes off centre at user font changes in good browsers) */
#button3{
	height:40px;
	background:url(golden.png);
	line-height:40px; /* referred to by the vertical-align */
}
#button3 a{
	vertical-align:middle; /* applies on inline or inline-block boxes */
	line-height:1.2; /* resetting a flexible line-height */
}

/* in a fix height button; vertical centre by a fix line-height (works best in IE because IE can't adjust a fix line-height, comes off centre at user font changes in good browsers ) */
#button4{
	height:40px;
	background:url(golden.png);
	line-height:40px;
}

/* in a flexible height button; vertical centre by line-height length set in em, or unit-less, to the same as height or the same, (works in all browsers also at user font changes) */
#button5{
	height:2.4em;
	background-color:gold;
	line-height:2.4em;
}

/* in a fluid height button; vertical centre by symmetrical top/bottom padding */
#button6{
	padding:10px 0;
	background-color:gold;
}
</style>
</head><body>

<h1>Vertically centre the text in a button.</h1>
<p>Mind that in good browsers only examples 1 and 2 are independent of current font-size!</p>

<div id="button1"><a href="#">button-text</a></div>

<div id="button2"><a href="#">button-text</a></div>

<div id="button3"><a href="#">button-text</a> </div><!-- note the white-space needed to apply the line-height -->

<div id="button4"><a href="#">button-text</a></div>

<div id="button5"><a href="#">button-text</a></div>

<div id="button6"><a href="#">button-text</a></div>

</body></html>