HTML初学者图片居中偏移问题排查及冗余代码优化咨询

图片偏移根因与修复 #

你遇到的阴影偏移问题是以下3个原因共同导致的，按顺序修改即可解决：

1. 缺少box-sizing: border-box全局规则：默认盒模型下，你给.responsive设置的padding: 20px会额外撑开元素宽度，导致容器实际占位大于你设定的width: 50%，布局挤压出现偏移。在<style>标签最开头添加以下规则即可：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. CSS语法错误：.desc和.desc2的font-family: 'Open Sans'属性后缺少分号，导致后续定义的padding属性失效，文字区域布局错位，补充两个属性后的分号即可。
3. 行内元素默认间隙：<a>和<img>默认都是行内元素，存在默认的基线空白和点击样式，添加以下规则消除间隙：

div.gallery a {
  display: block;
  text-decoration: none;
}
div.gallery img {
  display: block;
  width: 100%;
  height: auto;
}

代码冗余优化点 #

• 重复样式合并：.desc和.desc2的font-family、color、text-align属性完全一致，可以提取为公共类，减少重复代码
• 冗余padding声明：.desc中先写padding: 0px再写padding-top: 10px可简化为padding: 10px 0 0；.desc2中先写padding: 20px再覆盖上下padding可简化为padding: 5px 0 20px
• 无效响应式规则：700px断点下设置的width: 50%和默认规则完全重复，可直接删除该声明，仅保留需要修改的margin属性即可
• 多余标签：.desc和.desc2结尾的<br/>没有实际作用，可直接删除
• 未使用的类：代码中定义了.clearfix类但全程没有调用，可删除该规则

优化后完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
div.gallery:hover {
  box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;  
}
div.gallery a {
  display: block;
  text-decoration: none;
}
div.gallery img {
  display: block;
  width: 100%;
  height: auto;
}
/* 公共描述类 */
.desc-base {
  font-family: 'Open Sans';
  color: #03308D;
  text-align: center;
}
div.desc {
  padding: 10px 0 0;
  font-size: 18px;
}
div.desc2 {
  padding: 5px 0 20px;
  font-size: 14px;
}
.responsive {
  padding: 20px;
  float: left;
  width: 50%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
</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 desc-base"> <b> Graduate Associates </b> </div>
    <div class="desc2 desc-base">Description</div>
  </div>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Ernest Lin