Text not Being Placed Correctly In the Center
Posted
by ThatMacLad
on Stack Overflow
See other posts from Stack Overflow
or by ThatMacLad
Published on 2010-04-25T16:33:35Z
Indexed on
2010/04/25
16:43 UTC
Read the original article
Hit count: 289
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>
© Stack Overflow or respective owner
