html - 列未在移动设备上居中对齐

我创建了一个wp站点，在主页上添加了一个包含3列的html小部件。一切都很好，除了在移动设备上，屏幕右侧的3列关闭。在移动设备上查看时，我似乎无法将它们居中，如下图所示。

<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->

<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/newsletter/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/></a> .
</figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/school-calender/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></a></figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column -->


<div class="wp-block-column twitterContainer">
<!-- wp:column -->

<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->

我的css：

 .wp-block-column {
min-width: 220px;
max-width: 550px;
}


.wp-block-columns {
margin: 112px;
}

.wp-block-column  {
border: 2px solid #354063;
padding: 2px 10px;
}

最佳答案

您的列div具有最大宽度550px，父div具有112px余量。当屏幕大小小于（550+120*2）=790px时，列将向右对齐。为了防止出现这种情况，当屏幕大小小于800px时使用边距0。使用下面的css来实现这一点。

@media only screen and (max-width: 800px) {
  .wp-block-columns {
    margin: 0px;
  }
}

关于html - 列未在移动设备上居中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55314299/