个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 00:47:18 24 4
gpt4 key购买 nike

我想做一个这样的div

enter image description here

我用了两个<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

有人可以帮我改一下吗？

最佳答案

我刚刚对您的 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;
}

关于html - Div 在顶部，img 在中心，按钮在 sub，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56787114/

24 4 0
文章推荐： c - int8_t 类型的变量总是从 scanf 获取值 0
文章推荐： c - LED 保持亮起。不会打开和关闭
文章推荐： python - django parler 创建测试对象
文章推荐： node.js - node_modules 文件夹中有许多未知模块
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com