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时，您无法垂直居中。相反，使用内联块技术：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

以下是使用css flexbox的解决方案。

body {
background-color: #696969;
}
.c-project-bar {
  display:flex;
  align-items: center;
  justify-content: space-between;
  width: 355px;
  height: 30px;
  padding: 0px 10px;
  background-color: #ffffff;
}

.c-project-date {
  color: #828282;
  font-size: 14px
}

.c-project-github-icon {
  margin-left: 10px;
  background-color: #000000;
  height: 25px;
  width:25px;
  float: right;
}

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

Answer 3

实现此目标的另一种方法是使用transform。

position: relative;
top: 50%;
transform: translateY(-50%);

.c-project-bar {
  width: 355px;
  height: 30px;
  padding: 0px 10px;
  background-color: #ccc;
}

.c-project-date {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  color: #828282;
  font-size: 14px
}

.c-project-github-icon {
  margin-left: 10px;
  background-color: #000000;
  height: 25px;
  width:25px;
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<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>

Answer 4

您可以使用display: flexbox轻松完成。

.c-project-bar {
  display: flex; // power
  align-items: center; // aligning
  width: 355px;
  height: 30px;
  padding: 0px 10px;
  background-color: #ffffff;
}

.c-project-date {
  margin-right: auto; // let's push other stuff to right side
  color: #828282;
  font-size: 14px
}

.c-project-github-icon {
  margin-left: 10px;
  background-color: #000000;
  height: 25px;
  width:25px;
}

Fixed jsfiddle

在div中垂直对齐div，和

4 个答案: