0

I need help vertically aligning an image inside of a div.

I have tried all various methods found on the web. I have tried table display, line height, etc.

The page can be viewed at http://seekretgarden.tk/view/0/ . The red background is the display area of the image allowed by the div. I am undecided if I want dynamic height of the div yet or not. But I can't do fixed or dynamic without vertically aligning the image
first.

I have searched google for about 4 hours in total trying to find a solution and cannot. You can view my current css file for the div at http://seekretgarden.tk/view.css

2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by zizuno
0

Ok, I solved this with some jquery hack if anyone else finds this.

<script language="JavaScript" type="text/javascript">
<!--
  $("#spanbar").css("width",$("#bar").width()); 
 if($(window).height()<800) {
$("#spanbar").css("height",450); 
} 
else {
$("#spanbar").css("height",$(window).height()-350);
}


  //-->
</script>

What this does is use the width of the container div that it is in and sets the width equal to that. Then it sets the height based on the screen size. The reason some vertical align stuff wasn't working was the div didn't have a 'set' height and my html transitional I believe. The div also had to be set to 'display: table-cell'.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.