如何正确地将标题与居中的div元素对齐？

Question

我希望标题在居中的div元素的左上角对齐。我能想到的唯一方法是将position设置为relative并将top设置为值20％。这样做的问题在于它会导致页眉向右伸展，如fiddle中所示。

＆＃13;

＆＃13;

body {
  font-family: Europa;
}

.header {
  position: relative;
  left: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto
}

h4 {
  font-size: 5em;
  margin: 0 auto;
}

.box {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 20px;
  background: #6441a5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

＆＃13;

<div class="header">
  <h4>header</h4>
</div>

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将标题栏的宽度设置为与包装盒相同的宽度即可。

body {
  font-family: Europa;
}

.header {
  position: relative;
  width:500px;
  display: block;
  margin-left: auto;
  margin-right: auto
}

h4 {
  font-size: 5em;
  margin: 0 auto;
}

.box {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 20px;
  background: #6441a5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="header">
  <h4>header</h4>
</div>

<div class="box">
</div>

Answer 2

使用.centered wrap div，您可以更轻松地获得所需的结果，并在需要时保持元素流畅。

<div class="centered">
  <h4>header</h4>
  <div class="speech-bubble"></div> 
</div>

<style>
h4 {
  font-size: 5em;
  margin: 0 auto;
}

.speech-bubble {
  height: 500px;
  width: 100%;
  border-radius: 20px;
  background:#6441a5;
  margin: auto;
}
.centered{
  width:500px;
  margin: 0 auto;
  position: relative;
}

</style>

Answer 3

尝试为标题h4提供与语音气泡相同的宽度： https://jsfiddle.net/hxjdy720/

 h4 {
  font-size: 5em;
  margin: 0 auto;
  width: 500px;
}

Answer 4

最简单的解决方案是将两个元素放在一个div中，如下所示：

＆＃13;

＆＃13;

body {
  font-family: Europa;
}

.header {
    display: block;
    margin: auto;
    width: 500px;
}

h4 {
  font-size: 5em;
  margin: 0 auto;
}

.speech-bubble {
  height: 500px;
  width:500px;
  position: relative;
  border-radius: 20px;
  background:#6441a5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

＆＃13;

    <div class="header">
        <h4>header</h4>

        <div class="speech-bubble">

        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;