html - 如何在填充的 div 旁边垂直对齐 div？

Question

我有一个包含两个子项的 div，每个子项都使用 bootstrap 的列框起来。但是，在这些 div 中，我需要做的是，对于左侧的 div，我有一些图标需要垂直对齐并相对于右侧的 div 居中。

右边的 div 包含一个用作按钮的 anchor 标记，并有一些填充。这会导致按钮向下延伸，并且左侧的 div 不会占据剩余的高度。

我在这里附上了 codepen显示我在说什么。

.shareContainer {
  padding: 28px 0px;
}

.row {
  background: #eee !important;
}

.fa-icon {
  margin-left: 20px;
  font-size: 2.2em;
  color: #ff7350;
}

.button {
  display: inline-block;
  padding: 18px 50px;
  padding-right: 30px;
  font-size: 17px;
  font-weight: 400;
  font-family: "Lato";
  border-radius: 2px;
  letter-spacing: 0.01em;
  color: #fff !important;
  text-transform: uppercase;
  background-color: #fb8669;
  box-shadow: none;
  border: none;
}

.arrowRight {
  float: right;
  margin-left: 20px;
}

.button:active,
.button:focus,
.button:hover {
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='container shareContainer'>
  <div class='row'>
    <div class="col-sm-8">
      <i class='fa fa-share-square-o fa-icon'></i>
      <i class='fa fa-facebook-square fa-icon'></i>
      <i class='fa fa-twitter fa-icon'></i>
    </div>
    <div class="col-sm-4">
      <a target="_blank" class='button' }>
              register for event <svg class='arrowRight'width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="arrow-right"><path d="M9 4l7 8-7 8" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"></path></svg>
            </a>
    </div>
  </div>
</div>

Answer 1

使用flexbox垂直对齐元素:

.shareIcons {
  display: flex;
  align-items: center;
}

Codepen 演示:https://codepen.io/anon/pen/oeZVoa