Как выровнять картинку по центру c другими элементами?

Question

Мне нужно расположить строку поиска (картинку) по середине так, чтобы она не являлась блоком (т.е не переходила на следующую строку). В общем, как это выглядит сейчас:

Как нужно чтобы выглядело:

HTML:

<body>

<div class="hat">
    <div class="container">
        <img src="images/logo.png" class="logotype" alt="Aditu">

        <img src="images/search.png" class="search" alt="Search Panel">
    </div>
</div>

</body>

CSS:

html, body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    background: #39c8b0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hat {
    background: #fff;
}

.container {
    width: 1024px;
    margin: 0 auto;
}

.container::after {
    content: "";
    width: 100%;
    display: block;
    clear: both;
}

.hat .container .logotype {
    margin: 1.75% 2.14%;
}

.hat .container .search {

}

Answer 1

Задайте для класса .container такие стили:

.container {
    width: 1024px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Answer 2

Один из современных способов – использование Flexbox Layout.

html, body {
  font-size: 15px;
  background: #39c8b0;
}

* {
  margin: 0;
  padding: 0;
}

.container {
  background: #fff;
  display: flex;
  justify-content: space-between
}

<body>

  <div class="hat">
    <div class="container">

      <img width="100px" src="https://1000.tech/img/logo/1000.tech.png" alt="1000.tech">

      <input type="search">
      
      <div>Card</div>

    </div>
  </div>

</body>

Answer 3

Вместо картинок поиска, карзины и других значков лучше использовать не картинки, а fontawesome.

Для выравнивания элементов лучше использовать flex-box.

Вот html-разметка:

<div class="container">
  <div class="logo">LOGO</div>
<form action=""><input type="text"><button type="submit"><i class="fas fa-search"></i></button></form>
  <i class="fas fa-shopping-basket"></i>
</div>

Вот CSS-правила:

.container{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  width:35%;
  margin: 0 auto;
}


button{
  border:none;
  background-color: transparent;
 transform: translateX(-100%);
  cursor:pointer;  
  color:lightgray;
}

БЛОГ НА HUSL

Как выровнять картинку по центру c другими элементами?

Ответы (3 шт):