移动设备上的列未居中对齐

Posted

技术标签:

【中文标题】移动设备上的列未居中对齐【英文标题】:Column not center aligned on mobile device 【发布时间】:2019-08-14 07:22:13 【问题描述】:

我创建了一个 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"  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"  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- 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;

【问题讨论】:

【参考方案1】:

目前您的列宽不能小于 220 像素:

.wp-block-column 
    min-width: 220px; 

而父块的边距导致列左边缘距离屏幕左边缘112像素:

.wp-block-columns 
    margin: 112px;

由于这两种情况,列的右边缘开始在狭窄的屏幕上向右移动太远。

如果你只是评论这个属性,该栏会减少并保持在手机的中心。但在这些键中,它变得不可读。

您需要在移动设备上更改此列的行为。在窄屏幕上,它应该几乎占据整个屏幕宽度。

例如:

.wp-block-column 
	border: 2px solid #354063;
	padding: 2px 10px;
	margin: 0 auto;
	min-width: 220px; 
	max-width: 80%; 
	width: 550px; 


.wp-block-columns 
	margin: 112px auto;


img 
	max-width: 100%;
<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"  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"  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- 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 -->

【讨论】:

您好 Gleb,非常感谢您的评论,上述操作确实有效,但导致页面左侧没有边距,并且当桌面浏览器变小时对齐很奇怪。 CSS代码似乎在下面工作,所以问题解决了。不过谢谢! @Grace 感谢您的反馈。如果需要,您可以测试此代码。将它放在 CSS 的末尾。 @media (max-width: 600px) .wp-block-column width: 80%; .wp-block-columns margin-left: auto; margin-right: auto; 【参考方案2】:

您的列 div 的最大宽度为 550 像素,父 div 的边距为 112 像素。当屏幕尺寸小于 (550+120*2) = 790px 时,列右对齐。为防止出现这种情况,请在屏幕尺寸小于 800 像素时使用边距 0。使用以下 CSS 来执行此操作。

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

【讨论】:

【参考方案3】:

您可以使用此功能针对移动设备进行调整

@media only screen and (max-width: 600px) 
//your style goes here
body 
background-color: lightblue;



更多信息请访问w3school

【讨论】:

以上是关于移动设备上的列未居中对齐的主要内容,如果未能解决你的问题,请参考以下文章

如何使社交图标与移动设备的中心对齐?

在设备尺寸上集中对齐项目 =< 小

如何调整图片的大小以方便移动设备?

仅在移动设备上的垂直和水平中心

Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮

如何使用移动设备的引导程序并排对齐 div? [复制]