HTML-集中图像的快速问题-初学者在此-堆栈溢出

顺晟科技

2022-10-19 11:57:06

142

这里是HTML初学者。

我有一个关于对齐要集中的图像的快速问题--悬停在阴影上显示我的图像仅向右偏几个像素：示例1

另一个示例

我的HTML代码如下所示。提前感谢！！

如果上面的代码片段中有多余的HTML代码，请提醒您，谢谢您！

顺晟科技：

它在代码中居中使用背景色可以看到。如果不居中，则使用:

根据需要调整图像大小，此处仅用小来演示，更改为那

<!DOCTYPE html>
<html>
<head>
<style>

div.gallery:hover {
 box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;  
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  font-family: 'Open Sans'
  padding: 0px;
padding-top: 10px;
font-size: 18px;
  color: #03308D;
  text-align: center;
}

div.desc2 {
  font-family: 'Open Sans'
  padding: 20px;
padding-top: 5px;
padding-bottom: 20px;
font-size: 14px;
  color: #03308D;
  text-align: center;
}


.responsive {
  padding: 20px;
  float: left;
  width: 50%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="www.google.com">
      <img src="https://rmkcdn.successfactors.com/a6c5af8d/019942b5-bb07-49d5-ad5b-4.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc"> <b> Graduate Associates </b> <br/></div>
<div class="desc2">Description<br/> </div>
  </div>
</div>

</body>
</html>

如下面的代码片段（使用颜色来描绘元素覆盖的区域，并显示是否居中）

或

<!DOCTYPE html>
<html>
<head>
<style>

div.gallery:hover {
 box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;  
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  font-family: 'Open Sans'
  padding: 0px;
padding-top: 10px;
font-size: 18px;
  color: #03308D;
  text-align: center;
}

div.desc2 {
  font-family: 'Open Sans'
  padding: 20px;
padding-top: 5px;
padding-bottom: 20px;
font-size: 14px;
  color: #03308D;
  text-align: center;
}


.responsive {
  padding: 20px;
  float: left;
  width: 50%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="www.google.com">
      <img src="https://rmkcdn.successfactors.com/a6c5af8d/019942b5-bb07-49d5-ad5b-4.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc"> <b> Graduate Associates </b> <br/></div>
<div class="desc2">Description<br/> </div>
  </div>
</div>

</body>
</html>

类似下面的代码片段

一些额外的可能被添加到某一边，这会产生一些像素差异

上一篇：html-r：如何对{{variab 下一篇：JavaScript-如何在页面滚动

网站建设

Html

HTML-集中图像的快速问题-初学者在此-堆栈溢出