时间戳

首页 > 解决方案 > Div 在顶部，img 在中心，按钮在 sub

html - Div 在顶部，img 在中心，按钮在 sub

问题描述

我想做一个这样的div

在此处输入图像描述

我使用了两个<div>，其中包含两个<h2>，并且必须替换父级的顶部和底部<div>。这是我的代码：

.parent {
	 background: #eae8db;
	 margin: 20px;
	 border: 1px solid black;
	 position: relative;
	 height: 300px;
}

.top {
  background-color:#d6d1b1; 
  height: 15%; 
  width: 100%; 
  position: absolute;
  top: -06%; 
  left: -03.7%; 
  line-height:100px; 
  vertical-align:middle;
}

h2{ text-align: center;}

.center {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}

.bottom{
  background-color:#24bfd1;
  height: 5%; 
  width: 100%; 
  position: absolute;
  bottom : 60%;
  left: -03.7%; 
  line-height:100px; 
  vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="parent" >
    <div class="top">
      <h2>E-book</h2>
    </div>
    <img class="center" src="https://picsum.photos/200">
    <div class="bottom">
      <h2>Voir</h2>
    </div>
  </div>
</body>
</html>

链接到JsFiddle

有人可以帮我适应吗？

标签： htmlcss

解决方案

我刚刚对您的 CSS 进行了一些更改，替换它应该会有所帮助：

.parent {
  background: #eae8db;
  border: 1px solid black;
  display: flex;
  align-items:center;
  justify-content:center;
  height: 300px;
  position:relative;
}

.top {
  background-color:#d6d1b1; 
  height: 15%; 
  width: 100%; 
  position:absolute;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.bottom{
  background-color:#24bfd1;
  height: 12%; 
  width: 100%; 
  position: absolute;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

推荐阅读