我想在水平视图中没有hperlink下划线的图像标题

Question

<center><figure>
 <a href="doctor.html"><img class="img-circle" src="doctor.png" height="70" width="70" hspace="30"/><figcaption>Doctors</figcaption></a>
 <a href="lab.html"><img class="img-circle" src="lab.jpg" height="70" width="70" hspace="30"/><figcaption>Labs</figcaption></a>
 <a href="spa.html"><img class="img-circle" src="spa.png" height="70" width="70" hspace="30"/><figcaption>Spa</figcaption></a>
 <a href="gym.html"><img class="img-circle" src="gym.png"height="70" width="70" hspace="30"/><figcaption>Gym</figcaption></a>
</center></figure>

Answer 1

要删除链接的下划线，您需要在CSS文件中执行以下操作：

a {
  text-decoration: none; // removes the underline for all links
  color: inherit; // removes the blue color and sets the parents color for all links

}

为了使图像和文本彼此水平对齐，我至少要做的是创建一些水平对齐的列表并添加一些样式：

＆＃13;

＆＃13;

.horizontal-view ul {
  list-style-type: none;
}
.horizontal-view li {
  margin-left: auto;
  margin-right: auto;
  display: inline-table;
}
.picture {
  margin-right: 10px;
}

＆＃13;

<ul class="horizontal-view">
  <li>
    <img src="https://placehold.it/70x70" class="picture" />
  </li>
  <li>My First Image Caption</li>
</ul>

<ul class="horizontal-view">
  <li>
    <img src="https://placehold.it/70x70" class="picture" />
  </li>
  <li>My Second Image Caption</li>
</ul>

<ul class="horizontal-view">
  <li>
    <img src="https://placehold.it/70x70" class="picture" />
  </li>
  <li>My Third Image Caption</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我可能误解了这个问题，但我认为这就是你想要的。

我已经使用了display: inline-block;，因此每个数字都会水平显示（当然，如果没有足够的空间，它会移动到下一行）。

我还将你的HTML移动了一点，所以每张图片都有它自己的形象。

＆＃13;

＆＃13;

figure {
  display: inline-block;
  text-align: center;
  margin: 20px;
}
figure a {
  text-decoration: none;
}

＆＃13;

<center>
  <figure>
    <a href="#">
      <img src="http://placehold.it/70x70" width="70" height="70">
      <figcaption>Doctors</figcaption>
    </a>
  </figure>
  <figure>
    <a href="#">
      <img src="http://placehold.it/70x70" width="70" height="70">
      <figcaption>Labs</figcaption>
    </a>
  </figure>
  <figure>
    <a href="#">
      <img src="http://placehold.it/70x70" width="70" height="70">
      <figcaption>Gym</figcaption>
    </a>
  </figure>
  <figure>
    <a href="#">
      <img src="http://placehold.it/70x70" width="70" height="70">
      <figcaption>Spa</figcaption>
    </a>
  </figure>
</center>

＆＃13;

＆＃13;

＆＃13;

然后当然你可以开始有点发展，使用css动画制作动画并使用媒体查询

＆＃13;

＆＃13;

figure.menu {
  position: relative;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  height: 70px;
  margin: 20px
}
figure.menu a {
  text-decoration: none;
}
figure.menu figcaption {
  position: absolute;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  bottom: -30%;
  opacity: 0;
  width: 100%;
  transition: all .3s ease-in-out;
}
figure.menu:hover figcaption {
  bottom: 0;
  opacity: 1;
}
@media only screen and (max-width: 500px) {
  center {
    width: 250px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 250px) {
  center {
    width: 110px;
    margin: 0 auto;
  }
  figure.menu figcaption {
    bottom: 0;
    opacity: 1;
  }
}

＆＃13;

<center>
  <figure class="menu">
    <a href="#">
      <img src="http://placehold.it/70x70">
      <figcaption>Doctors</figcaption>
    </a>
  </figure>
  <figure class="menu">
    <a href="#">
      <img src="http://placehold.it/70x70">
      <figcaption>Labs</figcaption>
    </a>
  </figure>
  <figure class="menu">
    <a href="#">
      <img src="http://placehold.it/70x70">
      <figcaption>Gym</figcaption>
    </a>
  </figure>
  <figure class="menu">
    <a href="#">
      <img src="http://placehold.it/70x70">
      <figcaption>Spa</figcaption>
    </a>
  </figure>
</center>

＆＃13;

＆＃13;

＆＃13;

鼠标悬停在其中一个图片/链接上会使名称滑入。