文本居中和图文排布的方法记录

最新推荐文章于 2021-11-21 20:51:26 发布

Xin_xiao_bai

最新推荐文章于 2021-11-21 20:51:26 发布

阅读量232

点赞数

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/Xin_xiao_bai/article/details/104451338

版权

代码记录：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 600px;
				height: 200px;
				border:1px solid pink;
			}
			/*单行文本居中*/
			.p1{
				width: 100px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				border:1px solid pink;
			}
			/*多行文本居中*/
			.div1{
				display: flex;
				align-items: center;
				text-align: center;
			}
			/*div居中*/
			.div3{
				width: 100px;
				height: 80px;
				margin: 60px auto;  /*当盒子有宽度时,可以用来水平居中*/
				border:1px solid pink;
			}
			
			
			/*图文排布问题：默认底部对齐，改变图片基线可以中部对齐，图片浮动为顶部对齐*/
			img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!--文本居中问题-->
		<div><p class="p1">小花</p></div>
		<div class="div1">文字，是一个汉语词汇，拼音为wén zì，基本意思是记录思想、交流思想或承载语言的图像或符号。该词出自《史记·秦始皇本纪》：“一法度衡石丈尺，车同轨，书同文字。”</div>
		<div>
			<div class="div3">我是需要居中的div</div>
		</div>
		
		<!--图文排布问题-->
		<div><img src="img/heTuiJian11.png"/>图文排布</div>
		<div><img src="img/heTuiJian11.png"/ style="vertical-align: middle;">图文排布</div>
		<div><img src="img/heTuiJian11.png" style="float: left;"/>图文排布</div>
	</body>
</html>

居中问题效果图一览：
在这里插入图片描述

单行文本：水平居中为text-align: center;垂直居中为line-height: XXpx;
此处的XX为容器的高度。
多行文本：display: flex; align-items: center; text-align: center;
盒子居中：相对父级。margin: 60px auto; 60px表式上下与父级间隔60px，auto左右自适应父级宽度居中。注意：居中的盒子本身要有宽度。
对于盒子的居中：如果是定位的元素还有以下方法>>水平居中position:absolute+left:50%+transform:translateX(-50%);垂直居中position:absolute+top:50%+transform:translateY(-50%)

图文排布效果图一览：
在这里插入图片描述