How to center text horizontally and vertically within box element? [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

Using HTML/CSS I want to create button-like link:

a.btnlink{
    border: 2px solid #808080;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    height: 50px;
    margin-bottom: 5px;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    width: 200px;
}

This works fine with one exception: The text within the button box is not centered horizontally (only vertically).

How can I center the text within the box?
And: is my approach to create a button-like link correct, or can I achive that easier?



Solution :

Try this instead:

a.btnlink
{
    border: 2px solid #808080;
    display: inline-block;
    height: 54px;            /* height & line-height values match */
    line-height: 54px;       /* causing vertical centering (for one-line string) */
    margin-bottom: 5px;
    width: 204px;
    text-align: center;      /* centers horizontally */
    text-decoration: none;
}

    CSS Howto..

    What is .htc file ?How it works in Internet explorer

    jQuery select box Show/hide div

    How to change the attribute value of an element with by another element Selector in HTML + CSS?

    How to have menu items streched in full width menu with css for any screen automatically

    How to use CSS to make this works on retina screen?

    How to align a div to lower left corner in css

    How do I get the (element with the) highest CSS z-index in a document?

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How to position an absolute div next to an element in a scrollable section, but outside the section

    How to change css file for this aim?

    How can I use a non-breaking space before an inline-block-default element, such as a

    How to create marquee infinite loop of logos slider with css only

    How to use jQuery to set min-height the same as window

    How to set up simple hover buttons with block format?

    How to make the div's appear inline in the following code?

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How to center webpage content

    How to remove only one media rule property from external css

    How not to display / filter out special characters? (CSS or Javascript)

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How do I use Parent page to get attributes for wp_nav_menu buttons?

    CSS How to add a button below an image [closed]

    Table: how to change pictures on mouseover on single rows?

    How to make non standard shape buttons, non clickable outside of it's border

    How to create this type of element using XHTML & CSS?

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    how to load a css for Safari only?

    How can I get Chrome to resize this div when the padding changes?

    How to refer in CSS to all elements that have some attribute?

    How to move the POV of an image when using overflow: hidden?