平板电脑中心Div

Question

网站：https://dev.momentinaboxclub.com/ 区域：关于盒子

我希望此列以移动设备为中心。我目前正在媒体查询中使用此CSS：

.about-box {
   width: 90%;
   margin: 0 auto;
}

这似乎可以在手机上使用，但在平板电脑上，盒子正向左移动。我不知道为什么它不会居中。请帮忙。

谢谢！

Answer 1

媒体查询中有一个针对该元素的float: left，它会影响平板电脑的尺寸，并且在您的情况下适用于类别.vc_col-sm-8，最小宽度为768px。

只需将float: none;添加到该元素的CSS规则中即可。

Answer 2

将display: flex;添加到.full_section_inner，仅适用于中型设备！

@media only screen and (min-width: 768px) and (max-width: 992px){
    .full_section_inner{
        display: flex;
        justify-content: center;
    }
}

Answer 3

您的HTML文件中有一个div，其属性为：width: 66.66666667%;。如果将其更改为width: auto;，您的问题将得到解决，但是它将消除文本周围的粉红色边框。如果将此行添加到css文件中，它应该可以解决对齐问题。

.wpb_column.vc_column_container.vc_col-sm-8.vc_col-has-fill {
    width: auto;
    }

希望这会有所帮助！