Question

嗨，有人可以帮助我，因为我已经尝试了一切。

我正在尝试将我的div内部的内容对齐，称为“包装器”。

无论我做什么，内容都不会对齐页面的中心。希望有人能帮助我。谢谢。

的CSS：

body {
        font-family:Arial, Helvetica, sans-serif; 
        font-size:medium; 
        color:#3f3f3f; 
        background:#26265d; 
        padding:0; 
        margin:0;
        text-align:center;
    }

.wrapper {width:100%; overflow:hidden; margin:auto; display:block; text-align:center;
     position:relative; margin-left:auto;
margin-right:auto;


}

HTML：

<div class="wrapper">
<?php include("includes/mod_home/mod_newest.php"); ?>
</div>

php页面：

<?php
        $newest_set = get_newest_member();
        $newest_count = mysql_num_rows($newest_set);
        while ($newest = mysql_fetch_array($newest_set)) {
        $strn = "".$newest['display_name']."";
        $max = 13;
        if(strlen($strn) > $max) {
        $strn = substr($strn, 0, $max) . '...'; } 
$photo = "../data/photos/{$newest['id']}/_default.jpg";

if (!file_exists($photo)) {
    $photo = "../data/photos/0/_default.jpg";
}

            echo"
            <div class=\"mod_newest_image\">
            <a href=\"profile.php?id={$newest['id']}\"><img width=95px src=\"".$photo."\"/></a>

            </div>";

    }
    ?>


<style>

.new_text{
    color:#373775;
    position:absolute;
}
.mod_newest_image img{
    border:2px solid #6f6f6f;
    -moz-box-shadow: 0px 0px 5px #CCC;
    -webkit-box-shadow: 0px 0px 5px #CCC;
    box-shadow: 0px 0px 5px #CCC;
    width:95px;
    height:120px;
    display:block;
 float:left;
 position:relative;
 margin:3px;

 }
</style>

Answer 1

如果您尝试使用margin来居中，则您的包装器的宽度不能为100％：0 auto;您需要为包装器提供小于100％的值才能使其工作。

.wrapper {width:1000px; overflow:hidden; margin: 0 auto; }

Answer 2

wrapper need size，不需要position:relative;

如果您的图片大小与包装器不同。您可能需要添加margin: 0 auto;来对齐包装中心

在中间/中心对齐div内容？

2 个答案: