Мое название не в центре - PullRequest
Новая
       10

Мое название не в центре

0 голосов
/ 21 мая 2018

Я абсолютно уверен, что мой код приводит к тому, что мой заголовок находится в центре моего текстового поля, однако, это не похоже на это!Может кто-нибудь проверить, что мой код работает? 

.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>

Изображение текстового поля: The Black/Green Text is the box I am referring to!

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Почему бы не написать <p> или <div> внутри тега <center>.Это заставляет что-либо быть в центре.Во избежание дальнейших проблем изолируйте элемент, который нужно отцентрировать от других элементов.

0 голосов
/ 21 мая 2018

Удаление 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>
...