html - 尝试将移动屏幕的 Bootstrap 列中的元素居中(媒体查询)

Question

实时链接在这里 http://soloveich.com/pr6/

在这里看手机屏幕版本http://quirktools.com/screenfly/#u=http%3A//soloveich.com/pr6/&w=320&h=480&a=33&s=1

一直在处理其他几个问题，因此，源 css 有点“脏”。

例如， Logo 。这是我完成它的方式。

<div class="col-md-3 col-sm-6 col-xs-12" id="side1">
<div id="side">  
<div id="logo">
<a href="<?php echo get_settings('home'); ?>"><img height="106" width="186" src="http://www.soloveich.com/pr6/wp-content/themes/accu1/images/sound-acupuncture-miami.png"></a>
</div></div></div>

尝试用媒体查询来运行它

@media screen and (max-width: 320px) {
#side1{
width: 320px;

}

@media screen and (max-width: 320px) {
#side{
width: 320px;
}
}

@media screen and (max-width: 360px) {
#logo a{
width: 186px;
margin: 0 auto;
}
}

它不会居中。怎么了？

Answer 1

对于移动设备，下面的样式应该让您朝着正确的方向前进:

#side {
   ... styles ...
   margin:0 auto;
}

.mainlist {
   text-align:center;
}

.mainlist ul li { float:none }