圖片下方的居中鏈接

如何將鏈接居中放在我的圖片下方，我嘗試了一切。當我使用clear:both這幫助了我，但是然後我的圖像在一列中，我不想那樣。所以基本上我想讓每一張圖片都集中在鏈接/文本中。我知道這個HTML/CSS不包含我想放在圖片下面的鏈接，我刪除了所有可能令人困惑的內容。圖片下方的居中鏈接

謝謝。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 
html { 
 
    height: 100%; 
 
    background-color: #F0FFF0; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    font-size: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: box; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 5%; 
 
    padding: 0%; 
 
    clear: both; 
 
} 
 
.products img { 
 
    width: 31%; 
 
    height: 31%; 
 
    position: relative; 
 
    float: left; 
 
    display: inline; 
 
    margin: 0 2% 3% 0%; 
 
}

<!DOCTYPE> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Products</title> 
 
    <link rel="stylesheet" type="text/css" href="css/products.css" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="products"> 
 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="images/tunel.jpg" alt="Product name"> 
 
     </a> 
 

 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2016-04-27 gojic

哪裏是文字？ – Aziz

在這裏你去：

不上浮的圖像，漂浮的鏈接。

製作圖像display:block並將text-align:center添加到鏈接。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 
html { 
 
    height: 100%; 
 
    background-color: #F0FFF0; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    font-size: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: box; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 5%; 
 
    padding: 0%; 
 
    clear: both; 
 
} 
 
.products a { 
 
    width: 31%; 
 
    height: 31%; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0 2% 3% 0%; 
 
    text-align: center 
 
} 
 
.products a img { 
 
    display: block; 
 
    margin: auto; 
 
}

<!DOCTYPE> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Products</title> 
 
    <link rel="stylesheet" type="text/css" href="css/products.css" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="products"> 
 
     <a href="#"> 
 
     <img src="http://www.fillmurray.com/g/140/100" alt="Product name">Link Text 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="http://www.fillmurray.com/g/140/100" alt="Product name">Link Text 
 
     </a> 
 

 
     <a href="#"> 
 
     <img src="http://www.fillmurray.com/g/140/100" alt="Product name">Link Text 
 
     </a> 
 

 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2016-04-27 16:02:01

謝謝，但現在，當我將鼠標懸停在圖像上方或文本/鏈接上方的空白處時，相同的文本/鏈接變爲活動狀態並且表現得像是圖像的一部分？我想將文本/鏈接與圖像分開。對不起，如果我不清楚這一點。 @Paulie_D – gojic

您的問題中沒有鏈接文字......它應該在哪裏，爲什麼它不在鏈接內？ –

圖片下方的居中鏈接

回答

相關問題