2013-04-25 4 views
0

привет, кто-то может помочь мне в этом, потому что я все пробовал.Выравнивание содержимого div в центре/центре?

Я пытаюсь выровнять содержимое центра внутри моего 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> 
+0

это чистый вопрос CSS, удалите тег php, чтобы получить больше ответов. – michi

+2

Не публикуйте PHP-код, а сгенерированный вывод. CSS не применяется к PHP-коду. – Ejaz

+0

Вы должны потратить больше времени на изучение и практику основ. – kapa

ответ

1

Ваша обертка не может иметь ширину 100%, если вы пытаетесь его в центр с маржей: 0 auto; Вы должны дать оболочке значение менее 100%, чтобы оно работало.

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

, но я пытаюсь сделать мобильный сайт, и поэтому хочу, чтобы ширина была в процентах, поэтому taht –

+0

Затем перейдите и установите процент. Даже 90% будет сосредоточено. Идея состоит в том, что браузер не может центрировать то, что занимает всю ширину. – ZombieCode

0

wrapper need size, не нужно position:relative;

если ваш размер изображения не совпадает с оберткой. вам может понадобиться добавить margin: 0 auto; для выравнивания центра внутри wraper