對于在學(xué)習(xí)新框架的時(shí)候我們多少會遇到不同的問題，對于在Bootstrap框架學(xué)習(xí)中我們的問題更是會相應(yīng)的增加，那么我們就來說說“bootstrap怎么設(shè)置居中？”這個(gè)問題吧！
1.首相我們先創(chuàng)建新的項(xiàng)目先來看看沒有設(shè)置之前的樣式結(jié)果和代碼如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link ref="stylesheet" href="css/bootstrap-grid.min.css">
</head>
<body>
<div style="width: 100px;height: 200px;background-color:red">hhhh</div>
</body>
</html>
結(jié)果如下：
2.修改樣式在代碼中加入? margin: 0 auto ；?使得我們的盒子位置處于居中的狀態(tài)。代碼如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link ref="stylesheet" href="css/bootstrap-grid.min.css">
</head>
<body>
<div style="width: 100px;height: 200px;background-color:red ;margin: 0 auto;">hhhh</div>
</body>
</html>
我們可以在運(yùn)行結(jié)果中看到已經(jīng)居中了,如下圖：
當(dāng)我們把div的換成button之后就算加了 ?margin: 0 auto;?這個(gè)屬性也不會進(jìn)行居中，會保持在靠左的位置，所以這時(shí)候我們就需要在 ?margin: 0 auto;? 這屬性后面添加 ?display:block ?屬性才可以讓 ?button? 元素居中顯示。而且如果要讓我們的文字居中的話要加上 ?text-align:center;?的屬性才可以顯示居中。
總結(jié)：
這就是今天的有關(guān)于“bootstrap怎么設(shè)置居中？”這個(gè)問題的方法和代碼分享，當(dāng)然如果你有更好的案例或者項(xiàng)目方法也可以和大家一起分享探討學(xué)習(xí)。更多與 Bootstrap 相關(guān)的知識點(diǎn)我們都可以在 W3cschool中學(xué)習(xí)和了解。
