Text not Being Placed Correctly In the Center
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&开发者_JS百科gt;
<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>
Add line-height: 40px to .post-title.
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.
加载中,请稍侯......
精彩评论