Question

跪求高手，css 如何修改以实现自适应屏幕水平居中排列，如图。本人太笨，在网上查了许多可还是不会弄，

index。php：
<div id="main" class="c" >
<?php if (is_search()) { ?><div class="search_nav"><strong>搜索结果:</strong> <?php the_search_query(); ?></div><?php } ?>
<?php if (is_tag()) { ?><div class="search_nav"><strong>标签:</strong> <?php single_tag_title(); ?></div><?php } ?>

<div id="theway"> <?php if(is_home()) { ?>
<span style="float:right;margin-right:130px">点图片可查看详细或提交评论.</span>
<?php } else { breadcrumbs();} ?>
</div>
<ul class="image_box c" id="image_box">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li id="post-<?php the_ID(); ?>" >
<h1>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="out" target="_blank">
<strong><?php the_title(); ?></strong>
<?php echo get_post_first_pic(get_the_ID()) ?>
<span class="fenlei" title="分类"><?php show_cats();?> </span>

</a>

</h1>
<?php
echo '<div class="info"><span title="old" class="yuanjia">'. zdy($post->ID,'oldprice') .'</span><span title="new" class="jiage">￥'. zdy($post->ID,'price') .'</span>
<a href="'. get_permalink() .'" title="'. get_the_title() .'" target="_blank">打开</a> </div>'
?>

<div class="time"><?php the_time('m/d-G:h') ?></div>
<div class="tags"><?php the_tags(__(' '), ' ? '); ?></div>
</li>
<?php endwhile; else: ?>
<div class="post">对不起，你要查看的宝贝因为已过期而删除。你可以去<a href="<?php echo get_option('home'); ?>"><strong>首页</strong></a>查看，或查看以下宝贝：</div>
<div class="cl"></div>
<ul class="image_box c" style="display:inline;">
<?php get_recent_posts(16,$id); ?>
</ul>
<?php endif; ?>
</ul> ------------------------------------------------css样式表：
.字数限制写不下了

Answer 1

body{text-align:center;} //IE下这样就能居中了
然后所有内容放进一个大div，这个大div的css样式把左、右外边距设置为auto;
由于这个div从body上继承了body的文字对齐属性，div里面的东西也会居中对齐，所以你要把大div的样式上写一条：text-align:left;

追问

body{text-align:center;} 这样一写，整个网站的文字就都变成居中了，
是否可以只写：
.image_box{ }
.image_box li { }
实现：适应屏幕自动填充数量居中排列，比如屏幕拉宽时自动填充5个li居中，屏幕拉窄时自动填充4个居中，剩下的一个自动到第二排，要实现这样的样式该如何设置呢？

追答

(一)body{text-align:center;} 这样一写，整个网站的文字就都变成居中了

你没仔细看我上面的回答并测试，或是你没看懂，仔细看我第一次回答的最后一句

(二)实现：适应屏幕自动填充数量居中排列，比如屏幕拉宽时自动填充5个li居中，屏幕拉窄时自动填充4个居中，剩下的一个自动到第二排，要实现这样的样式该如何设置呢？

外面还是要套个父元素，比如你举例的li的父元素是ul，可以把ul按我上面说的办法居中，ul的宽度设置为百分比，然后里面的li浮动

Answer 2

#image_box{list-style:none;width:100%;text-align:center;margin:0;padding:0;}

#image_box li{margin:0;padding:0;display:inline-block;width:20%;}