CSS 实现行内和块级元素对齐

Eason_qyl

已于 2023-09-15 17:10:33 修改

阅读量1.5k

点赞数 1

分类专栏： CSS Sass 文章标签： css 前端 css3

于 2021-07-20 15:37:10 首次发布

本文链接：https://blog.youkuaiyun.com/qyl_0316/article/details/118935853

版权

CSS Sass 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在HTML页面布局中，如何使行内和块级元素在同一行内水平居中对齐的三种方法：1) 使用Flexbox布局，通过justify-content和align-items实现；2) 将块级元素转换为行内块级元素并设置宽高及vertical-align；3) 利用浮动和vertical-align属性。这些方法在网页设计中非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际的页面元素中，有很多时候，行内和块级元素是混存的，而又需要让他们在一行整齐排列，所以，需要行内和块级元素水平居中对齐。

<section>
	<div>张三三</div>
	<div>20岁</div>
	<span>男</span>
	<span>201200101</span>
</section>

/*第一种方案,思路：弹性盒子布局，水平，垂直居中*/
section {
	display: flex;
	justify-content: center; /*水平居中*/
	align-items: center; /*垂直对齐*/
}
/**这样在行内和块级元素混合的布局中，块级和行内就水平居中了*/

/*第二种方案：将块级元素转为行内块级这样可以设置宽高*/
section {
  height: 30px;
  width: 300px;
  background: #ececec;
}
div, span {
  display: inline-block;
  vertical-align: sub;
}
span {
	width: 30px;
	background: red;
}

/*第三种方案：
	display:inline
	float:right,
	vertical-align: middle
*/
section {
	float: right;
	div {
		display: inline;
		margin: 0 10px; /*设置左右边距*/
	}
	span {
		vertical-align: middle;
	}
}

常见的行内元素和块级元素：
行内元素：button, input, label, select, textarea, a, img, span, script
块级元素：div, section, p, table, form, header, footer, h1~h6, aside, canvas, ol, ul,