Question

我有以下代码将一堆图标（链接）放在水平线上，我想知道如何在每个图像下面添加文字？我尝试过使用<br>text</br>，但是然后它右边的所有图片都被放到换行符上，我只得到一个水平列表。谁能在这里提供任何帮助？我过去曾多次遇到这个问题

HTML：

<head>
  <title>Server Name</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <div id="logo">
    <img src="assets/img/logo.gif" class="logo-img" />
  </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div id="links-container">
    <div class="links" align="center">
      <a href="./forums"><img src="assets/img/Forums.png"></a>&nbsp;&nbsp;
      <a href="http://shop.zentriamc.com"><img src="assets/img/Store.png"></a>&nbsp;&nbsp;&nbsp;
      <a href="./vote"><img src="assets/img/Vote.png"></a>&nbsp;&nbsp;&nbsp;
      <a href="./bans"><img src="assets/img/Bans.png"></a>&nbsp;&nbsp;&nbsp;

    </div>
  </div>
</body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS：

body {
  background: url(assets/img/bk.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#logo {
  position: absolute;
  width: 100%;
  left: 0;
  top: 150px;
}
.logo-img {
  display: block;
  margin-left: auto;
  margin-right: auto;

}
#links-container {
  position: absolute;
  left: 0;
  width: 100%;
    margin: auto;
}
.links img {
  transition: all .2s ease-in-out;
  display: inline;
}
.links img:hover {
  transform: scale(1.1);
}
.links p {
  font-family: "PT-Sans", sans-serif;
  color: white;
}

Answer 1

1）用位置Reader in = new BufferedReader(new InputStreamReader(conn.getErrorStream(), "UTF-8")); // Do you response parsing here.的{{1}}包裹a元素，使用位置div的{{1}}并设置relative和{{ 1}}为了它。

2）使用p属性和absulote属性，而不是使用连续的bottom s序列。

＆＃13;

left

＆＃13;

top

＆＃13;

在内嵌图像下添加文本

1 个答案: