Блог

Я создаю адаптивный веб-сайт, и мне нужно поведение, показанное на этом рисунке:

как вы видите, строка расположена по центру, а точнее, под буквами out слова about, я попытался добиться этого, добавив display:block и margin:auto в центр строки, это сработало, но не достигло того, к чему я стремлюсь (я хочу, чтобы строка была под буквами ‘out‘), я попытался расположить строку, добавив margin-left это тоже сработало, но не реагирует. есть решения?

вот мой код:

HTML

 <section class="about-us">
<h1 class="title"><i class="fas fa-utensils abicon"></i>
About us<div class="line"></div></h1>

  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
    imprimeur
    anonyme assembla </p>
</section>
  

CSS

   .about-us {
    color: black;
    font-family: Roboto;
    position: relative;
  }

  .title {
    text-align: center;
    vertical-align: text-bottom;

  }

.title::after{
  content:"";
    background-color: #ff9900;
  width: 50px;
  height: 4px;
  margin-bottom: 50px;
display:block;
  margin:auto;
}

  .abicon {

    font-size: 2rem;

  }

  .title-description {
    display: block;
    margin: auto;
  }
  

это фрагмент codepen:https://codepen.io/Amoocris/pen/vPWOpX

Кстати, я знаю, что это довольно глупый вопрос, но я все еще новичок в CSS, я пробовал align-text:center , и это не сработало, я хочу знать почему и заранее благодарю вас

Очень простым решением было бы обернуть символы «out» в промежуток.

 .about-us {
  color: black;
  font-family: Roboto;
  position: relative;
}

.title {
  text-align: center;
  vertical-align: text-bottom;
}

.title .underline {
  border-bottom: 4px solid #ff9900;
}

.abicon {
  font-size: 2rem;
}

.title-description {
  display: block;
  margin: auto;
}  

 <section class="about-us">
  <h1 class="title"><i class="fas fa-utensils abicon"></i> Ab<span class="underline">out</span> us
  </h1>

  <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla </p>
</section>  

Если вам разрешено изменять HTML-код, вы могли бы использовать добавление интервала вокруг букв «out», а затем добавить подчеркивание с помощью псевдоэлементов:

 .underline {
  position: relative;
}

.underline:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 4px;
    background-image: linear-gradient(to right, orange, red);
    box-shadow: 0 0 2px 2px rgba(255, 0, 0, .2);
    border-radius: 2px;
  }  

 <h1>Ab<span class="underline">out</span> us</h1>  

РЕДАКТИРОВАТЬ: Я использовал псевдоэлементы вместо границы или простого подчеркивания, потому что это дает вам больше свободы на случай, если вы захотите сходить с ума от таких эффектов, как тени, градиенты, анимация, …