垂直對齊css元素更接近圖像

我有一個頁面，提供隨機圖像。圖像下方是一個css元素，允許您向上或向下投影圖像，但是，我認爲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來顯示元素。

來源

2013-11-03 adeoba

<p>標籤有默認邊距值，可以調整第二<p>底部的保證金帶來的vote_updown2<div>接近它像這樣：

添加類圖像容器前。 image_container：

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

然後CSS屬性添加到容器中，並根據需要調節下邊距：

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

js.fiddle

來源

2013-11-03 11:32:06 razzak

嗨razzak，我得到了這個錯誤：解析錯誤：語法錯誤，意想不到的T_CONSTANT_ENCAPSED_STRING，期待'，'或';'在... – adeoba

更改alt =「」alt =''刪除上述錯誤... – adeoba

感謝razzak。你的解決方案工作 – adeoba

一下添加到.vot_updown2：

margin-top:-10px;

您可以將10px的改變到你想要

一切。

來源

2013-11-03 10:41:19

通過爲img元素提供「display：block」或「float：left」樣式聲明，可以刪除圖像下方的多餘空白區域。見Remove white space below image

來源

2013-11-03 11:03:56 vinniecent

添加這樣的：

垂直對齊：中部;

來源

2013-11-03 11:42:27

垂直對齊css元素更接近圖像

回答

相關問題