在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您不能垂直居中。 相反，請使用內聯塊技術：

 .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瀏覽器上正常工作的正確方法。

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輕松地做到這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;
}

固定jsfiddle