时间戳

首页 > 解决方案 > div 中的 div 和文本行为怪异

html - div 中的 div 和文本行为怪异

问题描述

我想在 div“firstquad”内水平和垂直居中文本“name”。我希望 div 具有 100% 的宽度和 25% 的高度。但是 div 的宽度远远超过 100%。对于文本，我将顶部和左侧设置为 50%。文本应该居中，并且 div 应该水平适合页面，但它是这样的。有什么帮助吗？

body {
  padding: 0%;
  margin: 0%;
  height: 300%;
  width: 100%;
  background-color: cornsilk;
}

#firstquad {
  position: relative;
  width: 100%;
  height: 25%;
  top: 0%;
  text-align: center;
  background-color: blue;
}

#name {
  position: relative;
  top: 50%;
  left: 50%;
  color: white;
}
<div id="firstquad">
  <h1 id="name">ASEF DIAN</h1>
</div>

标签： htmlcss

解决方案

两者div和h1本身都是块级元素。

块级元素的行为方式是

  • 他们在自己之前和之后创建一个换行符
  • 他们抓住尽可能多的水平空间

这意味着<div><h1></h1></div>您可以拥有div尽可能多的水平空间（整页宽度）。在其中，h1行为相同，消耗周围div允许的所有水平空间。

现在position: relative; left: 50%;你不要改变它的宽度h1——你只需改变它的渲染开始的位置。显然，这导致了h1部分外移div。添加边框以便您了解：

body { margin: 30px; }

div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; }
<div><h1>Test</h1></div>

现在移动h1（只是稍微移动，所以效果更明显）：

body { margin: 30px; }

div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; position: relative; left: 20px; }
<div><h1>Test</h1></div>

推荐阅读