html - 在 div 内垂直对齐 div，以及

Question

我正在尝试创建一个 div，然后在 div 中将日期放在左侧，将两个图标放在右侧。两者都应该垂直居中，边缘有一些边距，父 div 中的其他元素之间有边距。但是现在当我运行它时，图标最终会出现在奇怪的位置，经常会从 div 中剪掉。

.c-project-bar {
  width: 355px;
  height: 30px;
  display: table;
  padding: 0px 10px;
  background-color: #ffffff;
}

.c-project-date {
  display: table-cell;
  vertical-align: middle;
  color: #828282;
  font-size: 14px
}

.c-project-github-icon {
  margin-left: 10px;
  background-color: #000000;
  height: 25px;
  width: 25px;
  float: right;
  vertical-align: middle;
  display: table-cell;
}

<div class="c-project-bar">
  <p class="c-project-date">Aug, 2017</p>
  <span class="c-project-github-icon"></span>
  <span class="c-project-github-icon"></span>
</div>

https://jsfiddle.net/enyzhxyz/

编辑:

每个人的答案都很棒，似乎主要问题是

继承了 { margin: 0px; }，它给每个人的解决方案都带来了麻烦。我通过包含一个 margin: initial 来解决这个问题，然后再使用任何 margin 样式，所以它首先删除了 { margin: 0px; } 然后添加我想要的那个。

Answer 1

当你给 float: right 时，你不能垂直居中。相反，使用内联 block 技术:

.c-project-bar {
  width: 355px;
  padding: 0px 10px;
  background: #ccf;
}
.c-project-date, .c-project-icons {
  display: inline-block;
  width: 48%;
  vertical-align: middle;
}
.c-project-icons {
  text-align: right;
}
.c-project-github-icon {
  margin-left: 10px;
  background-color: #000000;
  height: 25px;
  width:25px;
  display: inline-block;
  vertical-align: middle;
}

<div class="c-project-bar">
  <p class="c-project-date">Aug, 2017</p>
  <div class="c-project-icons">
    <span class="c-project-github-icon"></span>
    <span class="c-project-github-icon"></span>
  </div>
</div>

我会建议您使用 transform 和 position 居中技术，但对于此解决方案来说，这太过分了。我给了一些背景颜色，看它是完全垂直对齐中间的。虽然它使用了稍微额外的标记，但这也是适用于不支持 flexbox 的浏览器的正确方法。