tags:

views:

45

answers:

2

This is another noobish mistake from me but I've placed some text in my page but after adding some padding to my div tag it's impossible for me to place my Text in the vertical center. Here is a preview of my problem:

My Problem

The CSS:

body {
    background-image: url(../images/body-bg.jpg);
    font-family: arial;
}

.cms-head {
    background-image: url(../images/cms-head.png);
    background-repeat: no-repeat;
    width: 850px;
    height: 50px;
    padding: 5px;
    margin-bottom: -10px;
}

.posts-list {
    background-image: url(../images/new-post-b.png);;
    width: 840px;
    height: 500px;
    padding: 5px;
    border-bottom: 1px solid #000000;
}

.content {
    width: 850px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
}

.edit-post-but {
    background-image: url(../images/new-button.png);
    background-repeat: no-repeat;
    width: 60px;
    height: 40px;
}

.post-title {
    width: 834px;
    height: 40px;
    background-image: url(../images/post-head.png);
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    font-size: 20px;
    color: #ffffff;
}

.bottom {
    width: 850px;
    height: 50px;
    background-image: url(../images/cms-bot.png);
    background-repeat: no-repeat;
}

a:active, a:link, a:visited{
    color: #ffffff;
}
a:hover{
    text-decoration:none;
}

The HTML/PHP:

<html>
<head>
<title>Blog Name | Edit Post</title>
<link rel="stylesheet" href="css/cms.css" type="text/css" />
</head>
<body>
<div class="content">
<div class="cms-head">
<a href="newpost.php"><img src="images/new-button.png" /></a>
<a href="#"><img src="images/rss-button.png" /></a>
</div>
<div class="posts-list">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('tmlblog');

$result = mysql_query("SELECT timestamp, id, title FROM php_blog ORDER BY id DESC");

while($row = mysql_fetch_array($result)) {
    $date  = date("l F d Y",$row['timestamp']);
    $id = $row['id'];
    $title = strip_tags(stripslashes($row['title']));

    if (mb_strlen($title) >= 50) {
        $title = substr($title, 0, 50);
        $title = $title . "...";
    }
    print("<div class='post-title'><a href=\"update.php?id=" . $id . "\"><img src='images/edit-button.png'></a>$title<br /></div>");
}

mysql_close();

?>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
+1  A: 

Add line-height: 40px to .post-title.

SLaks
The text has still been placed at the bottom despite the size of the div tag and the amount of padding. Any more suggestions?
ThatMacLad
+1  A: 
div.post-title
{
  padding-bottom: 10px;
}
div.post-title > a > img
{
  margin-bottom: -6px;
}

The margin and padding may need some adjustments to make it look good.

knut
Thanks so much knut! It actually worked for me. I really appreciate the help that you've provided me.
ThatMacLad