將文本居中對齊到浮動div的右側

Question

我想創建三個div，分別是分別上色的小盒子：

<div class="foo blue"></div>Blue
<div class="foo purple"></div>Purple
<div class="foo wine"></div>Wine

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

這適用於所有內容，但我需要每個框旁邊的文本與相應的div右邊對齊。 一切都應該在一行中，文本垂直對齊其div。 這只是迫使文本超出了三個div的范圍。 將其連接在一起的合適方法是什么？

jsfiddle： http : //jsfiddle.net/vsfu72j8/1/

Answer 1

將float:left替換為：

.foo {
  display: inline-block;
  vertical-align: middle;
}

這是小提琴： jsfiddle

Answer 2

對於flexbox，將inline-flex與align-items: center;一起使用align-items: center; ，但是首先您需要將元素包裝在另一個標簽中。

代碼段：

 ul { margin: 0; padding: 0; list-style: none; } ul > li { display: inline-flex; align-items: center; } .foo { display: inline-block; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); } .blue { background: #13b4ff; } .purple { background: #ab3fdd; } .wine { background: #ae163e; } 

 <ul> <li> <span class="foo blue"></span> Blue </li> <li> <span class="foo purple"></span> Purple </li> <li> <span class="foo wine"></span> Wine </li> </ul> 

---

您還可以使用SVG <rect>表示您的正方形，從而在語義上進行改進。 使用Spritesheet重用同一元素。

代碼段：

 ul { margin: 0; padding: 0; list-style: none; } ul > li { display: inline-flex; align-items: center; } .foo { display: inline-block; width: 20px; height: 20px; margin: 5px; } .blue { color: #13b4ff; } .purple { color: #ab3fdd; } .wine { color: #ae163e; } .svg-spritesheet { display: none; } 

 <ul> <li> <svg class="foo blue"> <use xlink:href="#foo"></use> </svg> Blue </li> <li> <svg class="foo purple"> <use xlink:href="#foo"></use> </svg> Purple </li> <li> <svg class="foo wine"> <use xlink:href="#foo"></use> </svg> Wine </li> </ul> <svg class="svg-spritesheet"> <symbol id="foo" viewBox="0 0 20 20"> <title>foo</title> <rect width="20" height="20" fill="currentColor" stroke="#000" stroke-opacity="0.2" /> </symbol> </svg> 

Answer 3

您必須稍微重新排列HTML結構。 我使用CSS Flexbox來滿足您的要求。

請看下面的代碼或檢查這個小提琴 。

了解有關CSS Flexbox的更多信息

 .item-holder { display: flex; } .item { display: flex; align-items: center; margin-right: 10px; } .item:last-child { margin-right: 0; } .foo { width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); } .blue { background: #13b4ff; } .purple { background: #ab3fdd; } .wine { background: #ae163e; } 

 <div class="item-holder"> <div class="item"> <div class="foo blue"></div> <div class="text">Blue</div> </div> <div class="item"> <div class="foo purple"></div> <div class="text">Purple</div> </div> <div class="item"> <div class="foo wine"></div> <div class="text">Wine</div> </div> </div> 

希望這可以幫助！

Answer 4

當您希望div表現得像表格一樣時，可以使用CSS進行定義。 在某些情況下，我發現它非常直觀和實用：

HTML：

<div class="table-row">
  <div class="table-cell">
    <div class="foo blue"></div>
  </div>
  <div class="table-cell">Blue</div>
  <div class="table-cell">
    <div class="foo purple"></div>
  </div>
  <div class="table-cell">Purple</div>
  <div class="table-cell">
    <div class="foo wine"></div>
  </div>
  <div class="table-cell">Wine</div>
</div>

注意div是如何嵌套為表結構的。

CSS

.table-row{   
    display:table-row; 
} 

.table-cell{   
    display:table-cell; 
    vertical-align:middle;
}

.foo {
   width: 20px;
   height: 20px;
   margin: 5px;
   border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
     background: #13b4ff; 
}

.purple {
    background: #ab3fdd; 
}

.wine {
    background: #ae163e; 
}

http://jsfiddle.net/xzj6eauf/