html - 如何并排放置 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

我用了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>