webkit Center for IE和Edge

Question

使用display: block來中心IE上的按鈕是否正確，或者我應該尋找一種在其他瀏覽器上使用WebKit-center的方法嗎？

@media screen and (max-width: 767px) { 
 
    .flex { 
 
     display:inline-block; 
 
    } 
 
    .flex_height { 
 
     display:inline-block; 
 
    } 
 
    .grid_8 { 
 
     background-repeat:no-repeat; 
 
     width:98%; 
 
     margin-left:1%; 
 
     margin-right:1%; 
 
     text-align:-webkit-center; 
 
     text-align:-moz-center; 
 
     margin-left:auto; 
 
     margin-right:auto; 
 
    } 
 
}

<div class="grid_8"> 
 
    <button type="button" class="button_home mobile_on"> 
 
    *php code to generate text for a button here* 
 
    </button> 
 
</div>

Answer 1

一種inline-block將換到其內容的寬度，所以有上沒有點爲中心的內部inline-block一個按鈕。

參見：

.inline-block { 
 
    display: inline-block; 
 
    background-color: red; 
 
}

<div class="inline-block"> 
 
    <button>Button Label</button> 
 
</div> 
 
<p><em>As you can see, the button is already centered inside the red inline-block.</em></p>

相反，你可以使用一個普通塊（不在線）元素與text-align: center居中按鈕。

div { 
 
    background-color: red; 
 
    text-align: center; 
 
}

<div> 
 
    <button>Button Label</button> 
 
</div>

或者，如果你真的需要這種inline-block元素，那麼你就必須把它包起來都在外包裝：

.wrapper { 
 
    text-align: center; 
 
} 
 

 
.inline-block { 
 
    display: inline-block; 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="inline-block"> 
 
    <button>Button Label</button> 
 
    </div> 
 
</div>

除此之外，你還可以使用一些hacker作爲相對定位，負邊距或變換。但是，我會盡量保持簡單。

.inline-block { 
 
    display: inline-block; 
 
    position: relative; 
 
    left: 50%; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
    margin-left: -41px; /* Magic number. Not recommended! */ 
 
} 
 

 
#red { 
 
    background-color: red; 
 
    transform: translateX(-50%); /* Much better, but still... */ 
 
}

<div> 
 
    <div id="blue" class="inline-block"> 
 
    <button>Button Label</button> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <div id="red" class="inline-block"> 
 
    <button>Button Label</button> 
 
    </div> 
 
</div>