在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来让子元素水平居中对齐。