How do I center a button in html5?


Tags: css,html5,button,center

Problem :

How do I center a button in html5? by modify the css file. I don't want to use the center tag in the html code.

a.read{
padding:10px 20px;
font-size:14px;
line-height:20px;
background-color:#eba73c;
text-align:center;
color:#fff;
border-radius:5px;
text-decoration:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align:center;
display:inline-block;
clear:both
}


Solution :

You can apply these styles to the anchor to make it block-level, assign a width, and then adjust its margins like this:

a.read{
   display:block;
   width:100px;
   margin:0 auto;
}

Or apply this to its parent element:

.parent{
   text-align:center;
}

    CSS Howto..

    How to create cascading menus in rails?

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    How do i wrap a parent div to the width of a child div (dialog)?

    How to let the users style a web component with their own CSS?

    How to center div the whole screen page using css

    How to show/hide div on click with stricly HTML/CSS

    How to implement conditional CSS in this situation?

    How to get css value of an element inside array?

    how to make a left aligned navigation with dropdown elements

    How can I create a full height responsive horizontal scrolling list of images with CSS

    CSS - How to remove whitespace between anchored images

    How to add a CSS specifc for Google Chrome? [duplicate]

    How do I align an inner div with the bottom of an outer div?

    How to fill parent element background color with CSS?

    how do i change button/image onclick to active state?

    How to override css grouped styles

    How to add number to current CSS width with jQuery

    CSS: How to center text over an image, both always centered and proportional regardless of window size

    How to flow text from a box to another with CSS

    How to add condition in Extjs4 tpl for detecting current browser

    How to make space between menu items in CSS/HTML

    How can I make it so the first element in a DIV has a different CSS to others?

    Simple html page renders differently in Firefox and IE. How to fix it?

    Showing divs in th on the same line

    Show Feed in two columns in HTML

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    how can I shape the image size according to its nested box

    How do I stagger divs like Google Plus?

    How to place text at the bottom when there's predefined height!

    How to invert colors using CSS on hover