[分享]css中对联居中不了什么原因

在CSS中设置对联（双栏文本）居中，是前端开发者们常遇到的问题之一。虽然我们经常使用textalign属性来居中单独的文本块，但是对于对联却经常出现问题，不居中或者一个栏目居中而另一个栏目不居中。那么...

在CSS中设置对联（双栏文本）居中，是前端开发者们常遇到的问题之一。虽然我们经常使用text-align属性来居中单独的文本块，但是对于对联却经常出现问题，不居中或者一个栏目居中而另一个栏目不居中。那么，为什么CSS中对联居中不了呢？

 /*错误的方法*/
  .double-columns {
    text-align: center; /*让单行文字居中*/
  }
  .left-column, .right-column{
    display: inline-block; /*设置栏目为行内元素*/
  } 

首先，根据HTML结构，一个对联通常由两个栏目（left-column和right-column）组成，这两个栏目使用display: inline-block;的CSS样式来实现横向排列效果。但是，在尝试让对联居中时，只使用text-align属性并不能解决问题。因为text-align属性是作用在父级元素上，可以让行内元素居中，但是对于display: inline-block;元素而言，只有文字居中，元素本身不会居中。

所以，正确的方法应该是将栏目元素设置为块级元素，即display: block;，然后使用margin: 0 auto;来实现居中效果，如下代码所示：

 /*正确的方法*/
  .double-columns {
    text-align: center; /*让单行文字居中*/
  }
  .left-column, .right-column{
    display: block; /*设置栏目为块级元素*/
    margin: 0 auto; /*水平居中*/
  } 

总之，要让CSS中的对联居中，我们应该正确理解CSS中盒子模型的概念，将栏目元素设置为块级元素并使用margin属性来水平居中。