Question

我有一个提供随机图像的页面。在图像下面是一个css元素，允许你向上或向下投票图像，但是，我认为css略低于图像。我希望它垂直靠近图像。你能帮忙吗？

的style.css：

.vot_updown2 {
 position:relative;
 margin:3px;
 width:160px;
 background:#ffffff;
 border:0px solid #ffffff;
 font-family:"Segoe UI", Arial, sans-serif;
 text-align:center;
 padding:2px 1px;
 box-shadow:.17em .2em .23em #ffffff;
 -webkit-box-shadow:.17em .2em .23em #ffffff;
 -moz-border-radius:.7em;
 -webkit-border-radius:.7em;
 -khtml-border-radius:.7em;
 border-radius:.7em;
}

randimg.php片段：

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        echo "<p>", "<div class='tagtext'>AUTHOR: ", ($row['username']), " ", "TAG: ", ($row['tag']), "</div>";
        echo "<p>", '<img src="' . $row['image'] . '" alt="" />', "<br>";

echo "<div class='vot_updown2' id=" . 'vt_' .$table.($row['id']). "></div>";
    }

我试过删除换行符，但无济于事。尝试使用span而不是div无法显示元素。

Answer 1

<p>标记具有默认边距值，您可以调整第二个<p>底部边距，使vote_updown2 <div>更接近它，如下所示：

将类添加到图像容器ex。 image_container：

echo "<p class='image_container'><img src='" . $row['image'] . "' alt='' /></p>";

然后将css属性添加到容器中并根据需要调整底部边距：

.image_container
{
    margin-bottom: 0; //adjust as required
}

js.fiddle

Answer 2

将此添加到.vot_updown2：

   margin-top:-10px;

您可以将10px更改为

你想要的一切。

Answer 3

您可以通过为img元素提供“display：block”或“float：left”样式声明来删除图像下方的额外空白区域。见Remove white space below image

Answer 4

添加：

<强>垂直对齐：中部;

垂直对齐css元素更接近图像

4 个答案: