Flex布局和position定位联合使用

Working问题册 评论

问题场景

实现图形和文字与背景框垂直居中对齐，且图形与背景框左侧水平居中对齐，效果不受图形宽度影响。

image-20231115223444427

解决方案

使用flex布局调整图形和文字与背景框垂直居中，之后使用定位水平调整图形位置。

1
2
3
4
5
6
<div class="main">
  <div class="box">
    <div class="pic">我是<br/>图形</div>
    <div class="content">文字文字文字</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 背景框 */
.box{
  height: 100px;
  background-color: #ccc;
  margin-left: 50px;
  padding-left: 50px; /* 自由调整文字距离左侧距离 */
  /* 图形和文字与背景框垂直居中 */
  display: flex;
  align-items: center;
  position: relative;
}
/* 图形元素 */
.pic{
  width: 50px;
  height: 50px;
  border: 1px solid;
  /* 图形与背景框左侧水平居中 */
  position: absolute;
  left: 0;
  transform: translate(-50%); /* 保证对齐不受宽度影响 */
  display: flex;
  justify-content: center;
  align-items: center;
}

相关知识

1.设置了绝对定位的元素脱离文档流，显示效果为浮在其他元素上方。

2.flex布局对于设置了定位的元素仍然生效。

1
2
3
4
5
6
7
8
9
10
11
.box{
  ...
  display: flex;
  justify-content: center; /* 同时影响文内部文字部分和定位的图片 */
  position: relative;
}
.pic{
  ...
  background-color: #fff;
  position: absolute;
}
image-20231115225729192 
1
2
3
4
5
6
.box{
  ...
  display: flex;
  align-items: center; /* 同时影响文内部文字部分和定位的图片 */
  position: relative;
}
image-20231115225924078

枫与风