7、打造自适应布局：Ottergram 项目实践

打造自适应布局：Ottergram 项目实践

1. 居中细节图片

在处理完缩略图列表的布局后，接下来要对细节图片容器及其内容进行操作。细节图片是整个页面的核心，应处于页面的中心位置，同时搭配一个时尚的标题。

为了实现细节图片的居中效果，首先要将图片和标题包裹在一个容器中，然后把这个包裹容器在细节图片容器内居中。以下是具体操作步骤：
1. 在 index.html 中添加一个类名为 detail-image-frame 的 <div> 元素：

</ul>
<div class="detail-image-container">
  <div class="detail-image-frame">
    <img class="detail-image" src="img/otter1.jpg" alt="">
    <span class="detail-image-title">Stayin' Alive</span>
  </div>
</div>
</main>
</body>
</html>

2. 保存 index.html 文件。接着在 styles.css 中为 .detail-image-frame 添加样式声明，