Text not Being Placed Correctly In the Center
- by ThatMacLad
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:
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>
