CODEWITHSUNDEEP
css
user4215067
user4215067

Reputation:

Button center positioning

I have a problem with center positioning a button in a row in a table.I used width and margin but it don't work.Can you help me? Here's the code for that button(in css):

 .subm {
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black

}
.subm:hover {
background-image:none;
background-color:darkgray;
box-shadow:10px 10px 10px black
}

.subm:active {
color:black ;
font-weight:bold;
width:128px;
height:24px;
background-image:none;
background-color:dimgray;
}

Upvotes: 0

Views: 296

Answers (3)

Andy Mardell
Andy Mardell

Reputation: 1191

If you used width and margin: auto's and it's still not centering you may just need to add display: block to your .sumb class like so:

.subm {
    display:block;
    position:relative;
    width:130px;
    margin-left:auto;
    margin-right:auto;
    background-image:url('background.bmp');
    border:none;
    color:white;
    opacity:1;
    height:25px;
    outline:0 none;
    box-shadow:1px 1px 2px black
}

Demo: http://jsfiddle.net/re079odr/

Upvotes: 0

JiFus
JiFus

Reputation: 968

To achieve this, I would use following code:

.subm {
  position:absolute;
  width:130px;
  height:25px;
  top: calc(50% - 13px); // 50% - 0.5 * height.
  left: calc(50% - 65px); // 50% - 0.5 * width.
}

And for the parent:

position: relative;

You can see a working JSFiddle here

Upvotes: 0

sanoj lawrence
sanoj lawrence

Reputation: 993

simply try this 

button{
    height:20px; 
    width:100px; 
    position:relative;
    top:50%; 
    left:50%;
}

for just horizontal alignment use either

button{
    margin: 0 auto;
}

DEMO

Upvotes: 2

Related Questions