Conversation with Merlin · Fri Nov 24 2023

&#8203

' >Этап $step</h2>

Исправь код чтобы "Этап $step" был по середине, поле текста и кнопка на одном уровне.

Чтобы выровнять элементы на одном уровне и центрировать текст "Этап $step", вам нужно внести некоторые изменения в стили. Вот исправленный код:

<div style="
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
">
  <input type="text" style="
    border: 1px solid #000; 
    border-radius: 10px; 
    background-color: rgba(0, 0, 0, 0.9); 
    padding: 10px; 
    color: #fff;
    width: 300px; /* Укажите нужную ширину поля */
  " placeholder="Введите текст">

  <button style="
    border: 1px solid #000;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);      
    width: 37px;
    height: 37px;
    color: #000;
    background-image: url('arrow.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 10px; /* Увеличьте или уменьшите значение по своему усмотрению */
  ">&#8203</button>

  <h2 style='margin-top: 10px;'>Этап $step</h2>
</div>

Этот код использует flexbox для центрирования и выравнивания элементов на странице. Убедитесь, что ширина поля ввода отвечает вашим требованиям.

сделай чтобы кнопка и поле ввода были по середине по горизонтали и по вертикали

Конечно, вот код, поможет вам разместить кнопку и поле ввода по середине экрана как по горизонтали, так и по вертикали:

<div style="
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
">
  <input type="text" style="
    border: 1px solid #000; 
    border-radius: 10px; 
    background-color: rgba(0, 0, 0, 0.9); 
    padding: 10px; 
    color: #fff;
    width: 300px; /* Укажите нужную ширину поля */
  " placeholder="Введите текст">

  <button style="
    border: 1px solid #000;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);      
    width: 37px;
    height: 37px;
    color: #000;
    background-image: url('arrow.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 10px; /* Увеличьте или уменшите значение по своему усмотрению */
  ">&#8203</button>
</div>

Этот код использует flexbox для центрирования как по горизонтали, так и по вертикали.