中心药片部

Question

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

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

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

它似乎适用于手机，但在平板电脑上，盒子正在向左移动。我搞不懂它为什么不中心。请帮帮忙。

谢谢!

Answer 1

该元素的媒体查询中有一个float: left，它会影响平板电脑的大小，在您的示例中，它适用于最小宽度为768 to的类.vc_col-sm-8。

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

Answer 2

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

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

​

​

希望这能有所帮助！

Answer 3

将display: flex;添加到.full_section_inner中，仅用于中型设备，这应该有效！

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