CODEWITHSUNDEEP
htmlcss
gelolopez
gelolopez

Reputation: 174

Putting a button in center

I seem to have a difficulty in putting the button i made in the center of the screen. Here's the source code.

<a href="#" class="header-button">View Products</a>

Here are the styles

/*header button styles*/

a.header-button {
    display: inline-block;
    background-color:#
}

a.header-button:hover {
    color: #e8ddc8;
    text-decoration: underline;
}

.header-button {
    background-color:#031634;
    color:#e8ddc8;
    padding: 10px 5px 10px 5px;
    border-radius: 5px;
    text-align:center;
}

You see, even though I put text-align:center in the .header-button, the button does not position itself at the center. (See image below)

enter image description here

Can anyone help me?

Upvotes: 0

Views: 64

Answers (4)

Binita Lama
Binita Lama

Reputation: 1278

Try this. Working Fiddle

a.header-button {
    display: block;
    background-color:#;
    margin:0 auto;
    width:100px;
}

Upvotes: 4

Ash
Ash

Reputation: 1422

If you want to put a button or any element on middle of the screen,then use position absolute an give the top 50% and left 50% now,give margin just half of its width and height in minus :

Something like this :

CSS

button{
        position:absolute;
        top:50%;
        left:50%;
        width:100px;
        height:30px;
        margin:-15px 0 0 -50px;
      }

And if only middle from left then :

button{
        position:absolute;
        top:some_top_in_px;
        left:50%;
        width:100px;
        height:30px;
        margin:0px 0 0 -50px;
      }

Fiddle DEMO

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

You should give the container or the parent element text-align:center

jsfiddle

HTML

<div class="parent">
<a href="#" class="header-button">View Products</a>
</div>

CSS:

.parent{

 text-align:center;    
}

Upvotes: 1

I am Cavic
I am Cavic

Reputation: 1085

One solution: http://jsfiddle.net/xzY5j/

css: 

.header-button {
    background-color:#031634;
    color:#e8ddc8;
    padding: 10px 5px 10px 5px;
    border-radius: 5px;
}

.container {
    text-align:center;
    width: 100%;
    padding: 50px;
    background-color:#ccc;
}
}

HTML

<div class="container">
    <a href="#" class="header-button">View Products</a>
</div>

Other suggestion is: Binita Tamang solution she wrote it before I had a chance so I will let her get the credit for it :)

Upvotes: 1

Related Questions