a按钮居中显示 bootstrap_Bootstrap的图文区样式

weixin_39902870

于 2020-12-28 11:24:21 发布

阅读量78

点赞数

文章标签： a按钮居中显示 bootstrap

本文链接：https://blog.csdn.net/weixin_39902870/article/details/112125725

版权

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。

Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row">
			<figure class="figure">
				<img src="images/1140.jpg" class="img-fluid rounded figure-img" alt="">
				<figcaption class="figure-caption text-center">一叶知秋</figcaption>
			</figure>
		</div>
	</div>
</body>

</html>

标题对齐可以使用：右对齐.text-right、左对齐 .text-left、居中对齐 .text-center。

weixin_39902870

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a按钮居中显示 bootstrap_Bootstrap的图文区样式

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结...
复制链接

扫一扫