Как поставить svg и кнопку рядом и вертикально выровнять их?

Question

У меня есть следующий фрагмент:

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.container {
  padding: 1rem;
}

.clearfix {
  clear: both;
}

.has-border {
  border: 2px solid #000;
}

.d-inline-block {
  display: inline-block !important;
}

.align-middle {
  vertical-align: middle !important;
}

<div class="has-border">
  <div class="container">
    <div class="div1 float-left">
      Contact
    </div>
    <div class="div2 float-right">
      <button class="d-inline-block">
      Hey
    </button>
      <svg width="20" height="20">
      <circle cx="10" cy="10" r="40"
      stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

Как видите, кнопка и svg расположены рядом, но не выровнены по вертикали.

Итак, как мне поставитьsvg и кнопка рядом, которая также идеально выровнена по вертикали?

Answer 1

Удалить float-left и clearfix класс и добавить display: flex; в .float-right и display: flex; align-items:center; в .container

.float-right {
  margin-left: auto;
  display: flex;
}

.container {
  padding: 1rem;
  display: flex;
  align-items: center;
}

.has-border {
  border: 2px solid #000;
}

.d-inline-block {
  display: inline-block !important;
}

<div class="has-border">
  <div class="container">
    <div class="div1">
      Contact
    </div>
    <div class="div2 float-right">
      <button class="d-inline-block">
        Hey
      </button>
      <svg width="20" height="20">
        <circle cx="10" cy="10" r="40"
        stroke="green" stroke-width="4" fill="yellow" />
      Sorry, your browser does not support inline SVG.
      </svg>
    </div>
  </div>
</div>

Answer 2

используйте display:flex; и align-items:center; для класса .float-right, как показано ниже:

.float-right {
  float: right;
  display:flex;
  align-items:center;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
  display:flex;
  align-items:center;
}

.container {
  padding: 1rem;
}

.clearfix {
  clear: both;
}

.has-border {
  border: 2px solid #000;
}

.d-inline-block {
  display: inline-block;
}

.align-middle {
  vertical-align: middle;
}

<div class="has-border">
  <div class="container">
    <div class="div1 float-left">
      Contact
    </div>
    <div class="div2 float-right">
      <button class="d-inline-block">
      Hey
    </button>
      <svg width="20" height="20">
      <circle cx="10" cy="10" r="40"
      stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

Примечание: также нет необходимости использовать ! Важный

Answer 3

Я использовал flexbox для выравнивания элементов и немного очистил ваш код.

.container {
  padding: 1rem;
  display: flex;
  align-items: center; /* vertical alignment */
}

.has-border {
  border: 2px solid #000;
}

.div2 {
  margin-left: auto; /* Pushes it to the right */
  display: flex;
  align-items: center; /* vertical alignment */
}

<div class="has-border">
  <div class="container">
    <div class="div1">
      Contact
    </div>
    <div class="div2">
      <button>
      Hey
    </button>
      <svg width="20" height="20">
      <circle cx="10" cy="10" r="40"
      stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </div>
  </div>
</div>

Answer 4

Добавьте это к CSS кнопки:

vertical-align: middle;

И к svg:

display: inline-block;
vertical-align: middle;