4

Button not centered align in Safari browser only.

JSFIddle

HTML

<div class="" style=" width: 100%; ">
    <input value="Button" class="center-block" type="submit" style=""/>
</div>

CSS

.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}

Above problem just come in Safari. In Chrome and Firefox it works fine.

Junaid
  • 2,572
  • 6
  • 41
  • 77

1 Answers1

9

if you don't set a width for btn:

  1. parent - text-align: center
  2. button child - use display:inline-block instead of display: block

.wrap {
    text-align: center;
}
.center-block {
    display: inline-block;
}
<div class="wrap">
    <input value="Button" class="center-block" type="submit" />
</div>
Tuesdave
  • 669
  • 2
  • 8
  • 26
Dmitriy
  • 4,475
  • 3
  • 29
  • 37
  • Well I used slighter different and cleaner version as here http://jsfiddle.net/4Lgk6rdp/18/ – Junaid Jun 23 '15 at 05:13