centering an image

[lional]

Hi

I am trying to center an image using html and css

here is the code from my php file:

<div id="first_center">
<?php
$query = "SELECT * FROM front_page ORDER BY RAND() LIMIT 1";
$result = mysql_query($query, $conn);
while ($row = mysql_fetch_assoc($result)){
$funny_pic_out = $row["funny_pic"];
}
?>
<center style="vertical-align:middle">
<img src="images/funny_pic/<?php print $funny_pic_out ?>" alt="" />
</center>
</div>

and here is my css

#first_center {
float:left;
width: 314px;
margin-top:10px;
margin-left:10px;
margin-bottom:10px;
}
.centeredImage
    {
    min-height:1em;
    display:inline-block;
    vertical-align:middle;
}

 

I am trying to middle the image both vertically and horizontally

 

Thanks

 

Lional

 

[papillonstudios]

this should work

<div id="first_center">
      <?php
               $query = "SELECT * FROM front_page ORDER BY RAND() LIMIT 1";
       $result = mysql_query($query, $conn);
       while ($row = mysql_fetch_assoc($result)){
              $funny_pic_out = $row["funny_pic"];
       }
?>

<img src="images/funny_pic/<?php print $funny_pic_out ?>" alt="" style="margin-left:auto; margin-right:auto; vertical-align:middle;"/>
</div>

 

[haku]

You can't vertically center elements with a dynamic height without javascript or tables.

 

If you know the height, you can do the following (example is an element with 300px)

 

.element
{
  height:300px;
  width:300px;
  position:absolute;
  left:50%;
  margin-left:-150px; // half the width
  top:50%;
  margin-top:-150px; // half the height
}

[lional]

but the height can vary by the user

[JasonLewis]

If you know what the height would be for each user you could run your styles inline (or external if you can create a PHP file to parse the CSS), that way you can use PHP to calculate the correct margins.

 

<?php
  $query = "SELECT * FROM front_page ORDER BY RAND() LIMIT 1";
  $result = mysql_query($query, $conn);
  $row = mysql_fetch_assoc($result);
  $funny_pic_out = $row["funny_pic"];
   
  // obtain the individual user height and width
  list($width, $height, $mime, $attr) = getimagesize('images/funny_pic/' . $funny_pic_out);

  $margin_left = round($width / 2) * -1; // you could use ceil() here, but we'll use round
  $margin_top = round($height / 2) * -1; // again, could use ceil.
?>
<div id="first_center">
  <img style="position: absolute; width: <?php echo $width; ?>px; height: <?php echo $height; ?>px; top: 50%; left: 50%; margin: <?php echo $margin_left; ?>px 0 0 <?php echo $margin_right; ?>px" src="images/funny_pic/<?php print $funny_pic_out ?>" alt="" />
</div>

 

Not tested, so probably won't work right off the bat. But that's an idea of how you could do it.

[haku]

Agreed. Calculating the height either through PHP (adding an inline style) or javascript is the only way you can do this if the heights are not fixed.