首页 话题 小组 问答 好文 用户 我的社区 域名交易

[分享]css中如何把两个div水平居中对齐

发布于 2024-11-11 19:30:03
0
19

在CSS中,想要把两个div水平居中对齐并不难,下面给出两种解决方法。

方法一:使用Flexbox

父元素 {
  display: flex;
  justify-content: center;
}

子元素 {
  margin: 0 10px;
} 

其中,父元素要设置为flex布局,通过设置justify-content为center来使子元素水平居中对齐。子元素需要设置一个左右边距,避免出现紧贴的情况。

方法二:使用文本对齐

父元素 {
  text-align: center;
}

子元素 {
  display: inline-block;
  margin: 0 10px;
} 

像方法一一样,子元素需要设置一个左右边距,但这里是通过display: inline-block来实现的。父元素则通过设置text-align为center来让子元素水平居中对齐。

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流