Блог

Главная - Вопросы по программированию - Добавьте центрированный текст над центрированным flexbox

Добавьте центрированный текст над центрированным flexbox

#html #css #flexbox #html-heading

#HTML #CSS #flexbox #html-заголовок

Вопрос:

Я пытаюсь добавить центрированный заголовок над гибким полем, которое я также центрировал.

CSS:

 .images {  padding-right: 30px;   width: 70%;  height: auto; }  /*centered flexbox*/ .box {  display: flex;  margin: auto;  position: absolute;  align-items: center;  justify-content: center;  left: 50%;  top: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);  transform: translateX(-50%) translateY(-50%);   }  /*header*/ h1 {  text-align: center;  font-size: 1.5vw;  color: rgb(255, 255, 255); }  /*paragraph*/ p.t1 {  font-size:0.8vw;  color: rgb(255, 255, 255);  white-space: nowrap; }

HTML:

 lt;bodygt;  lt;h1gt;CENTERED HEADDERlt;/h1gt;   lt;div class="box"gt;  lt;img src="images/image.png" class="images"gt;lt;/imggt;  lt;p class="t1"gt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;/pgt;  lt;/divgt;      lt;/bodygt;

В принципе, я хочу, чтобы текст «ЦЕНТРИРОВАННОГО ЗАГОЛОВКА» был частью изображения и ТЕКСТА и масштабировался вместе с ним, и все, кроме заголовка, расположенного над изображением и текстом. Но он не мог понять, как это сделать.

Кто-нибудь может мне с этим помочь?

Ответ №1:

Вы можете использовать поле общего класса, внутри которого мы можем указать элементы изображения и заголовка. вы можете создать отдельный класс для заголовка.

 .header{ font-size: 10px; position: absolute; color: blue; }  
 .images {  width: 70%;  height: auto; }  .header{ font-size: 10px; position: absolute; color: blue;  }  /*centered flexbox*/ .box {  display: flex;  margin: auto;  position: absolute;  align-items:center;  justify-content: center;  left: 50%;  top: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);  transform: translateX(-50%) translateY(-50%);   } /*paragraph*/ .t1 {  font-size:1.5vw;   white-space: nowrap; } 
 lt;bodygt; lt;div class="box"gt; lt;div class="header"gt; lt;h1gt;CENTERED HEADDERlt;/h1gt; lt;/divgt;  lt;img src="https://i.pinimg.com/originals/43/62/24/436224f4005dcee1f5c5096cbc77bd80.jpg" class="images"gt;lt;/imggt;  lt;p class="t1"gt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;   lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;brgt;TEXT TEXT TEXT TEXT TEXT TEXTlt;/brgt;  lt;/pgt;  lt;/divgt;  lt;/bodygt;

Ответ №2:

Запустите это отдельно и проверьте, то ли это то, что вы ищете 🙂

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;  lt;stylegt;  .images {  width: 70%;  height: auto; }  .header{ font-size: 10px; position: absolute; color: white;  }  /*centered flexbox*/ .box {  display: flex;  margin: auto;  position: absolute;  align-items:center;  justify-content: center;  left: 50%;  top: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);  transform: translateX(-50%) translateY(-50%);   }  lt;/stylegt; lt;/headgt; lt;bodygt;   lt;div class="box"gt;  lt;div class="header"gt; lt;h1gt;CENTERED HEADERlt;/h1gt; lt;/divgt;  lt;img src="https://i.pinimg.com/736x/5b/b9/59/5bb95935defd974fa87b44eaa8ed9bcd.jpg" class="images"gt;lt;/imggt;  lt;/divgt;   lt;/bodygt; lt;/htmlgt;

Выход

Метки: