CODEWITHSUNDEEP
css
HenryM
HenryM

Reputation: 5793

How to centralise a button div

I want to centralise a button or a tag within the line it is on (by themselves).

I've written this CSS which makes it yellow, puts a border around it etc but it is always left aligned. How do I centralise it?

a.butt, button.butt {
   border: 1px solid #ffff01;
   background-color: transparent;
   height:50px;
   cursor:pointer;
   padding-left: 40px;
   padding-right: 40px;
   padding-top: 10px;
   padding-bottom: 10px;
   text-decoration: none;
   text-align: center;
   color: #ffff01;
}

Thanks for your help

Upvotes: 1

Views: 147

Answers (3)

Mohammad Wasim
Mohammad Wasim

Reputation: 199

margin-left:auto;
margin-right:auto;
width:150px; //width as you want
display:block;

Upvotes: 0

Jakob
Jakob

Reputation: 3546

You can do it by adding text-align:center; to parent <div>

Example here https://jsfiddle.net/uy4u781d/

Upvotes: 1

Jannik Lehmann
Jannik Lehmann

Reputation: 478

several ways to do this, but maybe 

a.butt, button.butt {
 border: 1px solid #ffff01;
 background-color: transparent;
 height:50px;
 cursor:pointer;
 padding-left: 40px;
 padding-right: 40px;
 padding-top: 10px;
 padding-bottom: 10px;
 text-decoration: none;
 text-align: center;
 color: #ffff01;

 display: block;
 margin-left: auto;
 margin-right: auto;
 width: ??px;
}

will do the trick.

Upvotes: 1

Related Questions