Html 在div内垂直对齐div，以及

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

.c-项目-bar{ 宽度：355px； 高度：30px； 显示：表格； 填充：0px 10px； 背景色：ffffff； } .c-项目日期{ 显示：表格单元格； 垂直对齐：中间对齐； 颜色：8282； 字号：14px } .c-project-github-icon{ 左边距：10px； 背景色：000000； 高度：25px； 宽度：25px； 浮动：对； 垂直对齐：中间对齐； 显示：表格单元格； }

2017年8月

当您给出float:right时，您不能垂直居中。相反，请使用内联块技术：

.c-项目-bar{ 宽度：355px； 填充：0px 10px； 背景：ccf； } .c-project-date、.c-project-icons{ 显示：内联块； 宽度：48%； 垂直对齐：中间对齐； } .c-项目图标{ 文本对齐：右对齐； } .c-project-github-icon{ 左边距：10px； 背景色：000000； 高度：25px； 宽度：25px； 显示：内联块； 垂直对齐：中间对齐； }

2017年8月

---

下面是一个使用css flexbox的解决方案

身体{ 背景色：6969； } .c-项目-bar{ 显示器：flex； 对齐项目：居中； 证明内容：之间的空间； 宽度：355px； 高度：30px； 填充：0px 10px； 背景色：ffffff； } .c-项目日期{ 颜色：8282； 字号：14px } .c-project-github-icon{ 左边距：10px； 背景色：000000； 高度：25px； 宽度：25px； 浮动：对； }

2017年8月

---

实现这一点的另一种方法是使用transform

.c-项目-bar{ 宽度：355px； 高度：30px； 填充：0px 10px； 背景色：ccc； } .c-项目日期{ 保证金：0； 位置：相对位置； 最高：50%； 转化：translateY-50%； 浮动：左； 颜色：8282； 字号：14px } .c-project-github-icon{ 左边距：10px； 背景色：000000； 高度：25px； 宽度：25px； 浮动：对； 位置：相对位置； 最高：50%； 转化：translateY-50%； }

2017年8月

使用display:flexbox，您可以轻松完成此操作

---

总的来说，你认为变换/定位应该是我在尝试获得这种效果时使用的方法吗？此外，只有当你从c-投影杆上移除高度时，这种解决方案的垂直定心固定似乎才起作用，这是我试图避免的。实际上，我收回了我在上一次评论中所说的话。可能是某种继承的风格导致了我的问题，因为我正在尝试其他解决方案，这些解决方案在我使用JSFIDLE或运行代码段时运行良好，但在我的网站上会产生奇怪的结果。@OliverHare请永远不要使用height。应根据内容自动计算高度：@OliverHare当时帮你解决了吗？如果您想提供完整的代码，我也可以进一步帮助您。这非常有效，只是我在c-project-date中继承了{margin:0px；}，这导致了一些奇怪的问题。我怎么解决这个问题呢？没关系，我通过将边距设置为初始值来解决它，然后在下一行设置我的右边距

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

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