bootstrap怎么設(shè)置文字居中顯示

養(yǎng)魚的貓咪
616
2021-04-22 14:57:18

使用bootstrap設(shè)置文字居中顯示的方法：1.新建html項(xiàng)目，導(dǎo)入bootstrap；2.添加div標(biāo)簽；3.使用text-center樣式設(shè)置文字居中；

bootstrap怎么設(shè)置文字居中顯示

具體步驟如下：

1.首先，新建一個(gè)html項(xiàng)目，并使用link標(biāo)簽導(dǎo)入bootstrap；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/bootstrap.min.css"/>
</head>
<body>
</body>
</html>

2.html項(xiàng)目新建好后，在項(xiàng)目中添加兩個(gè)div標(biāo)簽，并添加測(cè)試文字用于對(duì)比；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/bootstrap.min.css"/>
</head>
<body>
<div>測(cè)試文字</div>
<div>測(cè)試文字</div>
</body>
</html>

3.div標(biāo)簽添加好后，在標(biāo)簽中添加一個(gè)class屬性，設(shè)置text-center樣式即可實(shí)現(xiàn)文字居中顯示；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/bootstrap.min.css"/>
</head>
<body>
<div>測(cè)試文字</div>
<div class="text-center">測(cè)試文字</div>
</body>
</html>

0 踩