В HTML, как сделать так, чтобы текстовое поле находилось рядом и на том же горизонтальном выравнивании, что и изображение?

#html #css

Вопрос:

Я пытаюсь создать что-то вроде этих тонких полосок с панелью поиска в верхней части веб-сайта. Отличным примером этого может служить верхний раздел веб-сайта Stack Overflow. Обратите внимание на логотип, строку поиска и различные кнопки. Это в значительной степени именно то, что я пытаюсь сделать, хотя и с логотипом в центре. Когда я помещаю два элемента один за другим, они находятся не на одной высоте. Текстовое поле всегда находится над или под изображением логотипа. Я попытался поместить это в div, что позволило мне установить его в нужный цвет для фона, но он все равно не выровнялся должным образом. Я также попытался поместить 2 элемента в таблицу и завернуть каждый из них в <tr> . Это ничего не дало. Вот код, который у меня есть:

 <head>
  <link rel="stylesheet" , type="text/css" , href="Zaxent Stylesheet.css">
  <style>
    #top {
      background-color: rgb(181, 230, 29);
      text-align: left;
      margin: 0;
    }
  </style>

</head>

<body>
  <div id=top>
    <table>
      <tr><img src="Zaxent logo 2.png"></tr>
      <tr><input name="search bar search page"></tr>
    </table>
  </div>
</body>

И если это уместно, вот мой CSS-код:

 h1,
p {
  color: white;
  font-family: 'High Tower Text', 'Times New Roman', 'Arial';
  font-size: 40px;
  color: rgb(0, 100, 0);
}

body {
  font-family: 'High Tower Text';
}

p {
  font-size: 20px;
}

img {
  display: block;
  margin: 46px auto;
}

textarea {
  color: rgb(0, 100, 0);
}

textarea {
  border-radius: 20px;
  font-size: large;
  border-color: rgb(34, 177, 76);
  border-width: 5px;
  text-align: center;
}

p.x {
  text-align: left;
  color: black;
  font-size: 30px;
}

p.u_can_help_ppl {
  color: rgb(0, 0, 255);
}

fieldset {
  padding: 0;
  border-color: blue;
}

1. Не используйте table элемент для компоновки. Также не рекомендуется использовать пробелы в файловых ресурсах, таких как изображения и имена файлов таблиц стилей.

2. Существует элемент, называемый <header> .

3. Кроме того, я бы рекомендовал запустить ваш код через HTML-валидатор или использовать какой-либо линтер-есть по крайней мере одна ошибка (пропущенные кавычки вокруг идентификатора).

Ответ №1:

Вы должны использовать flexbox вместо таблиц. Извините, если вам это нужно с таблицами, но подход flexbox был бы:

 .top {
  display: flex;
  align-items:center;
  justify-content:center;
}

 <header class="top">
    <div class="logo">
        <img style="display:block;" src="https://via.placeholder.com/70x30/000000/FFFFFF?text=logo" alt="">
    </div>
    <div class="search-bar">
        <input style="padding:5px; width:40vw;" type="text" name="search-bar-field" id="search-bar-field">
    </div>
</header>