Question

这是我的另一个愚蠢的错误，但我在我的页面中放了一些文字但是在我的div标签上添加了一些填充后，我不可能将我的文本放在垂直中心。这是我的问题的预览：

My Problem http://i42.tinypic.com/wgrseu.jpg

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;
}

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>

Answer 1

将line-height: 40px添加到.post-title。

Answer 2

div.post-title
{
  padding-bottom: 10px;
}
div.post-title > a > img
{
  margin-bottom: -6px;
}

边距和填充可能需要进行一些调整才能使其看起来很好。

文本未正确放置在中心

2 个答案: