移动设备上的列未居中对齐
移动设备上的列未居中对齐
提问于 2019-03-23 21:39:25
我已经创建了一个可湿性粉剂网站，在主页上，我添加了一个HTML小工具与3列。一切都很好，除了在移动设备上，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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-23 22:30:52
您的列div的最大宽度为550px，父div的最大宽度为112px。当屏幕尺寸小于(550+120*2) = 790px时，列将右对齐。要防止出现这种情况，请在屏幕尺寸小于800px时使用边距0。使用下面的CSS可以做到这一点。
@media only screen and (max-width: 800px) {
.wp-block-columns {
margin: 0px;
}
}Stack Overflow用户
发布于 2019-03-23 22:02:06
当前您的列的宽度不能小于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" 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 -->
Stack Overflow用户
发布于 2019-03-23 22:11:29
您可以使用此工具针对移动设备进行调整
@media only screen and (max-width: 600px) {
//your style goes here
body {
background-color: lightblue;
}
}欲了解更多信息，请访问w3school
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55314299
复制相关文章
相似问题
腾讯云开发者
