Question

如何将链接置于我的图像下方，我尝试了一切。当我使用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>

Answer 1

你走了：

不要浮动图像，浮动链接。

制作图片display:block并将text-align:center添加到链接中。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

图像下方的中心链接

1 个答案: