App下載

bootstrap怎么設(shè)置居中？代碼分享！

猿友 2021-06-15 14:10:42 瀏覽數(shù) (11746)
反饋

對于在學(xué)習(xí)新框架的時候我們多少會遇到不同的問題，對于在Bootstrap框架學(xué)習(xí)中我們的問題更是會相應(yīng)的增加，那么我們就來說說“bootstrap怎么設(shè)置居中？”這個問題吧！

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é)果如下：

靠左未設(shè)置樣式

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)居中了,如下圖：

居中設(shè)置樣式完成

當(dāng)我們把div的換成button之后就算加了 ?margin: 0 auto;?這個屬性也不會進(jìn)行居中，會保持在靠左的位置，所以這時候我們就需要在 ?margin: 0 auto;? 這屬性后面添加 ?display:block ?屬性才可以讓 ?button? 元素居中顯示。而且如果要讓我們的文字居中的話要加上 ?text-align:center;?的屬性才可以顯示居中。

總結(jié)：

這就是今天的有關(guān)于“bootstrap怎么設(shè)置居中？”這個問題的方法和代碼分享，當(dāng)然如果你有更好的案例或者項(xiàng)目方法也可以和大家一起分享探討學(xué)習(xí)。更多與 Bootstrap 相關(guān)的知識點(diǎn)我們都可以在 W3cschool中學(xué)習(xí)和了解。


Bootstrap

0 人點(diǎn)贊