Блог

Главная - Вопросы по программированию - Как выровнять текст диапазона и элемент ввода по горизонтали

Как выровнять текст диапазона и элемент ввода по горизонтали

#html #css

#HTML #css

Вопрос:

Я работаю над созданием формы поиска. В этой форме поиска я использовал <input> тег. Прямо рядом со строкой поиска я хотел бы иметь текстовое слово с надписью » ОПРЕДЕЛЕНИЕ ПОИСКА». На данный момент мой текст определения поиска в теге span не центрирован по горизонтали в строке поиска.

Я попытался справиться с этим, добавив padding-top: 15px; , что дает мне похожее представление о том, к чему я стремлюсь. Возможно ли это с помощью свойства css? Я пытался использовать display: inline-block; , но это не дало эффекта.

введите описание изображения здесь

Мой ожидаемый результат — текст SEARCH DEFINITION должен отображаться рядом со строкой поиска и выравниваться по горизонтали по центру строки поиска. Похоже на эту фотографию:

введите описание изображения здесь

Вот фрагмент моего кода:

 .background {
  background-color:gray;
  width: 100%;
  height:200px;
}


span {
  color: white;
  display: inline-block;
}

input {
    width: 400px;
    border-radius: 4px;
    border: 3px solid white;
    font-size: 16px;
    background-color: #fefefe;
    padding: 12px 10px 12px 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
} 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="background">


<div class="row">
  <div class="col-md-4 padding-top"> 
    <span class="text-bold-white-14">SEARCH DEFINITION </span>
  </div>
            <div class="col-md-8">
                <div class="search-bar">
                    <i class="fas search fa-search"></i>
                    <input type="text" name="search" placeholder="Search Keyword">
                </div>
            </div>
        <!-- </div> -->
            
            
        </div>
        
</div>

Ответ №1:

Вам нужно только добавить один класс в свой .row div, класс .align-items-center , поскольку для свойства отображения row установлено значение flex с помощью bootstrap, у вас уже есть flex . Итак, чтобы выровнять их по вертикали, просто добавьте вышеуказанный класс в строку div следующим образом:

 <div class="row align-items-center">
</div>

и, добавив класс text-right к родительскому элементу span, выровняйте текст «ОПРЕДЕЛЕНИЕ ПОИСКА» по правой стороне.

Вот рабочий код:

 .background {
    background-color:gray;
    width: 100%;
    height:200px;
}


span {
    color: white;
    display: block;
    text-align: right;
}

input {
    width: 400px;
    border-radius: 4px;
    border: 3px solid white;
    font-size: 16px;
    background-color: #fefefe;
    padding: 12px 10px 12px 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
} 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="background">


<div class="row align-items-center">
  <div class="col-md-4 padding-top text-right"> 
    <span class="text-bold-white-14">SEARCH DEFINITION </span>
  </div>
            <div class="col-md-8">
                <div class="search-bar">
                    <i class="fas search fa-search"></i>
                    <input type="text" name="search" placeholder="Search Keyword">
                </div>
            </div>
        <!-- </div> -->
            
            
        </div>
        
</div>

Ответ №2:

Вы можете добавить d-flex класс в строку, чтобы выровнять его по вертикали.

 <div class="row d-flex align-items-center"> 
  //...
</div>

Затем text-right класс в div, содержащий span 

 <div class="col-md-4 text-right"> 
    <span class="text-bold-white-14">SEARCH DEFINITION </span>
  </div>
 
 .background {
  background-color:gray;
  width: 100%;
  height:200px;
}


span {
  color: white;
  display: inline-block;
}

input {
    width: 400px;
    border-radius: 4px;
    border: 3px solid white;
    font-size: 16px;
    background-color: #fefefe;
    padding: 12px 10px 12px 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
} 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="background">


<div class="row d-flex align-items-center">
  <div class="col-md-4 text-right"> 
    <span class="text-bold-white-14">SEARCH DEFINITION </span>
  </div>
            <div class="col-md-8">
                <div class="search-bar">
                    <i class="fas search fa-search"></i>
                    <input type="text" name="search" placeholder="Search Keyword">
                </div>
            </div>
        <!-- </div> -->
            
            
        </div>
        
</div>