解决：图片和文字不水平居中对齐

React.js学习 本文总阅读量次

问题

往父组件中放入图片后，父组件TopicItem中的文字 与 img不能水平居中对齐显示。

代码

1
2
3
4
5
6
7
8
<TopicItem>
  <img
    className="topic-pic"
    src="https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
    alt="社会热点"
  />
  社会热点
</TopicItem>

样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
export const TopicItem = styled.div`
  float: left;
  line-height: 32px;
  background: #f7f7f7;
  font-size: 14px;
  color: #000;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  .topic-pic{
    width: 32px;
    height: 32px;
  }
`;

可以看到图片和文字不水平居中对齐：
图片和文字不水平居中对齐
而没加图片之前文字是居中显示的。

原因

默认情况，图片是置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。

解决:图片使用float

  • 让图片左浮动，则脱离文档流，不影响父级元素文本布局。
  • 注意：想清除浮动可将父元素设置为BFC元素。
1
2
3
4
5
6
.topic-pic{
  width: 32px;
  height: 32px;
  margin-right: 10px;
  float: left;
}

效果

补充：让图片和父级元素文字底部对齐

设置图片的vertical-align属性

可以设置图片的vertical-align属性使图片和父级元素文字底部对齐：

1
vertical-align:text-bottom
React.js学习