嘗試在移動屏幕的引導程序列中居中放置元素（媒體查詢）

Question

實時鏈接在這里http://soloveich.com/pr6/

在此處查看移動屏幕版本http://quirktools.com/screenfly/#u=http%3A//soloveich.com/pr6/&w=320&h=480&a=33&s=1

由於正在處理其他一些問題，因此源CSS有點“臟”。

例如徽標。 這是我做的方法。

<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 }