Member Avatar for zizuno

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
  • 88 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by zizuno
Member Avatar for zizuno

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'.

Member Avatar for zizuno

Except I tried that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.