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

Question

我有一个包含两个子节点的div，每个子节点都使用bootstrap的列进行框架化。但是，在这些div中，我需要做的是，对于左边的div，我有一些图标需要垂直对齐并相对于右边的div居中。

右边的div包含一个锚标记，用作按钮，并有一些填充。这会导致按钮向下延伸，而左边的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

Answer 2

您只需要将这些内置的Bootstrap 4类应用于带有图标的LHS div

d-flex 
justify-content-center 
align-items-center

所以，现在shareContainer div看起来像这样：

<div class="container shareContainer">
     <div class="row">
          <div class="col-sm-8 d-flex align-items-center justify-content-center"> <=====
            ...
          </div>
          <div class="col-sm-4">
            ...
          </div>
     </div>
</div>

这是Codepen

它的基本功能是应用这些CSS属性：

display: flex;
justify-content: center;
align-items: center;

Answer 3

您只需向周围的容器添加margin:auto;：

.share {
  margin: auto;
}

演示：JSFiddle

Answer 4

您可以使用flexbox进行居中

＆＃13;

＆＃13;

.shareContainer {
  padding: 28px 0px;
}

.row {
  background: #eee !important;
}

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

.flex {
  display: flex; /* new */
  align-items: center; /* new */
}

.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;
}

.right-button {
  margin-left: auto; /* new */
}

＆＃13;

<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="flex">
      <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>
      <a target="_blank" class='button right-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>

＆＃13;

＆＃13;

＆＃13;