CODEWITHSUNDEEP
csshtml
Bear John
Bear John

Reputation: 3345

align div content in the middle/center?

hi can someone please help me with this because i have tried everything.

i am trying to align the content of center inside of my div called "wrapper".

whatever i do the content just will not align center of the page. hope someone can help me thanks.

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 page:

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

Upvotes: 0

Views: 2110

Answers (2)

chien pin wang
chien pin wang

Reputation: 567

wrapper need size, don't need position:relative;

if your image size is not the same as wrapper. you may need add margin: 0 auto; to align center inside of wraper

Upvotes: 0

ZombieCode
ZombieCode

Reputation: 1661

Your wrapper can't have a width of 100% if you are trying to center it with margin: 0 auto; You need to give the wrapper a value less than 100% for it to work. 

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

Upvotes: 1

Related Questions