Button center positioning

Question

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;
}

See : Fiddle : http://jsfiddle.net/m2c2ahd0/1/, fun one : http://jsfiddle.net/m2c2ahd0/2/ — sodawillow, Jan 03 '15 at 17:19
possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — sodawillow, Jan 03 '15 at 17:23

score 2 · Accepted Answer · answered Jan 03 '15 at 17:13

2

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

answered Jan 03 '15 at 17:13

sanoj lawrence

951
5
29
69

`margin: -10px -50px;` ? to reflect half the height of the element ? – sodawillow Jan 03 '15 at 17:13
Yea I was asking myself why too – JiFus Jan 03 '15 at 17:14
1

IMHO `-20px` should be `-10px` anayway I would have used `transform: translate(-50%, -50%);` to avoid having twice as much values to modify ^^ – sodawillow Jan 03 '15 at 17:16

score 0 · Answer 2 · answered Jan 03 '15 at 17:21

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

score 0 · Answer 3 · answered Jan 03 '15 at 17:21

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/

Button center positioning

3 Answers3

DEMO