画像の下にセンタリングする

どのように私の画像の下のリンクをセンターにするために、私はすべてを試みました。私がclear:bothを使用すると、これは私を助けましたが、私のイメージは1つの列にあり、私はそれを望んでいません。だから基本的に私はすべての画像の中心にあるリンク/テキストを荒らしたい。私はこの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

あなたの質問にはリンクテキストはありません...どこにいるのでしょうか？なぜリンクの中にいないのですか？ –

画像の下にセンタリングする

答えて

関連する問題