Vertical and horizontal center img in div

This example shows how an image (img) can be vertically and horizontally centered inside a div. At the same time it illustrates how to resize the image to fit inside the div.

A live view of this code can be seen here. 

<html>
  <head>
    <title>Vertically aligned img in div</title>
    <style type="text/css">
      #container {
        position: absolute;
        width: 600px;
        height: 600px;
        background-color: lightyellow;
        vertical align: middle;
      }  

      #container img {
        max-width: 80%;
        max-height: 80%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }


      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <img src="sl-buss-6050.jpg" alt="SL-buss 6050" title="SL-buss 6050">
      <p>The yellow box is here to show the div</p>
    </div>
  </body>
</html>

Create custom blog category layout in Joomla 1.5

If you need to customize the blog category layout in Joomla 1.5 you do like this: 

  1. Create the following subfolders to your template directory: 
    mkdir -p templates/yourtemplate/html/com_content/category
  2. Copy blog.php and blog_item.php from Joomla core:
    cp -p components/com_content/view/category/tmpl/blog.php templates/yourtemplate/html/com_content/category
    cp -p components/com_content/view/category/tmpl/blog.php templates/yourtemplate/html/com_content/category
  3. Customize blog.php and blog_item.php in the components/com_content/view/category/tmpl/blog.php templates/yourtemplate/html/com_content/category folder to your needs. These modified files will override the ones in the Joomla core if they exists.