App下載

bootstrap怎么設置居中？代碼分享！

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

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

1.首相我們先創(chuàng)建新的項目先來看看沒有設置之前的樣式結果和代碼如下：

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

結果如下：

靠左未設置樣式

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>

我們可以在運行結果中看到已經(jīng)居中了,如下圖：

居中設置樣式完成

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

總結：

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


Bootstrap

0 人點贊