时间戳

首页 > 解决方案 > 我的标题不在中心

html - 我的标题不在中心

问题描述

我完全肯定我的代码使我的标题位于我的文本框的中心，但是，它看起来不像！有人可以检查我的代码是否正确吗？

.container {
  width: 95%;
  margin: 0 auto;
}

.home-about-textbox {
  background-color: #232323;
  padding: 4em;
  width: 100vw;
  margin-left: -2.65%;
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
}

.home-about-textbox h1 {
  text-align: center;
  color: #00ff6c;
}
<div class="container">
  <section class="home-about">
    <div class="home-about-textbox">
      <h1>Who I am</h1>
      <p>I'm a young website developer who focusses on primarily making websites that are proven to have a <strong>high conversion rate</strong> so that my clients can experience that feeling of <strong>ever increasing cash flow!</strong></p>
      <p>I usually like to spend a lot of my freetime working on either: a client's website design, or my personal website design. I am never the 'second-best' when it comes to website design which is why I offer numerous <strong>free</strong> design revisions
        upon submission!</p>
    </div>
  </section>
</div>

文本框的图像： 黑色/绿色文本是我指的框！

标签： htmlcsscenter

解决方案

width: 100vw从.home-about-textbox似乎已解决的问题中删除，不是吗？

.container {
  width: 95%;
  margin: 0 auto;
}

.home-about-textbox {
  background-color: #232323;
  padding: 4em;
 
  margin-left: -2.65%;
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
}

.home-about-textbox h1 {
  text-align: center;
  color: #00ff6c;
}
<div class="container">
  <section class="home-about">
    <div class="home-about-textbox">
      <h1>Who I am</h1>
      <p>I'm a young website developer who focusses on primarily making websites that are proven to have a <strong>high conversion rate</strong> so that my clients can experience that feeling of <strong>ever increasing cash flow!</strong></p>
      <p>I usually like to spend a lot of my freetime working on either: a client's website design, or my personal website design. I am never the 'second-best' when it comes to website design which is why I offer numerous <strong>free</strong> design revisions
        upon submission!</p>
    </div>
  </section>
</div>

推荐阅读