將li居中對齊，並使其高度相等且寬度固定

Question

根據ul，有5 li。 希望所有具有相同高度且固定寬度的li（每個li的20％為100％）。 我用下面的代碼實現了這一點。但是我的問題是，如果我只有3個或4個li，我想以相同的高度和寬度但在中心顯示li。 現在，如果我有3或4，則寬度正在調整並占據整個ul容器。

即使其3 li或4 li，li也應具有固定的寬度，並在中心對齊。

 .box-outer { text-align: center; display: table; table-layout: fixed; background-color: #333; } .boxes { vertical-align: middle; width: 10% !important; margin-right: 1% !important; background: #fff; border-radius: 6px; text-align: center; padding: 32px 29px; display: table-cell; } .field-number { color: #de008d; font-size: 48px; font-family: sans-serif; } .field-text { padding-top: 10px; color: #333; } 

 <div class="box-outer"> <div class="boxes"> <h4 class="field-number">83</h4> <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> </div> <div class="boxes"> <h4 class="field-number">7,800</h4><span class="field-text">mod tempor incididunt ut labor</span> </div> <div class="boxes"> <h4 class="field-number">65k</h4><span class="field-text">ut aliquip</span> </div> <div class="boxes"> <h4 class="field-number">37k</h4><span class="field-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> </div> <div class="boxes"> <h4 class="field-number">&#163;250m</h4><span class="field-text">veniam, quis nostrud exercitation ullamco</span> </div> </div> 

JS小提琴鏈接

Answer 1

您可以使用flexbox 。
只需創建一個容器

display: flex;
justify-content: center;
align-items: stretch;

並用

flex: 0 0 20%;
display: flex;
align-items: center

這樣，每個元素的寬度為容器的20％，無論它們有多少，並且始終位於容器的中心。 顯然，第六個會繞第二行，但仍居中。

Answer 2

您可以使用flex框實現相同的目的。 這是具有5 li的示例代碼

 li { list-style-type: none; border: 1px solid black; width: 20%; } ul { padding: 0; display: flex; justify-content: center; } 

 <ul> <li>Li 1</li> <li>Li 2</li> <li>Li 3</li> <li>Li 4</li> <li>Li 5</li> </ul> 

這是另一個具有3 li的示例代碼：

 li { list-style-type: none; border: 1px solid black; width: 20%; } ul { padding: 0; display: flex; justify-content: center; } 

 <ul> <li>Li 1</li> <li>Li 2</li> <li>Li 5</li> </ul> 

CSS是相同的，只是li的數量不同。

Answer 3

使用Flexbox：

 * { box-sizing: border-box; } .box-outer { display: flex; justify-content: center; align-items: stretch; background-color: #333; } .boxes { flex: 0 0 20%; vertical-align: middle; border: 1px dotted red; padding: 4px 6px; margin-bottom: 0; } .field-number { color: #de008d; font-size: 48px; font-family: "hurme_geometric_sans_4regular", sans-serif; } .field-text { padding-top: 10px; color: #fff; } 

 <div class="box-outer"> <div class="boxes"> <h4 class="field-number">67</h4> <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> </div> <div class="boxes"> <h4 class="field-number">7,800</h4> <span class="field-text">mod tempor incididunt ut labor</span> </div> <div class="boxes"> <h4 class="field-number">6k</h4> <span class="field-text">ut aliquip</span> </div> <div class="boxes"> <h4 class="field-number">7k</h4> <span class="field-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> </div> <div class="boxes"> <h4 class="field-number">775m</h4> <span class="field-text">veniam, quis nostrud exercitation ullamco</span> </div> </div> 

Answer 4

嘗試display: flex; 而不是table 。

這樣，在第一個方框margin-left: auto; 在最后一個框margin-right: auto; ，每個盒子上的width都是固定的，每次都會保持不變。

您還可以在盒子上使用min-width: 10%和width: min-content來進行其他調整/對內容的反應，但不填充。

您的小提琴，已更新： https : //jsfiddle.net/vhkw6y7o/

 .box-outer {
    text-align: center;
    display: flex;
    flex-direction: row;
    background-color: #333;
    width: 100%;
  }
  .boxes {
    border: 1px dotted red;
    padding: 4px 6px;
    width: 10%;
    margin-bottom: 0;
  }
  .boxes:first-child {
    margin-left: auto;
  }
  .boxes:last-child {
    margin-right: auto;
  }
  .field-number {
    color: #de008d;
    font-size: 48px;
    font-family: sans-serif;
  }
  .field-text {
    padding-top: 10px;
    color: #fff;
  }

Answer 5

如果要繼續使用table-layout ，則需要使容器居中放置，該行始終被完全填充。

width將直接設置為單元格（ .boxes ），以便您擁有1或5，這將是設置的大小，表格（ .box-outer ）將居中。

這意味着您不能將table（ .box-outer ）設置為width:100%並不能從table-layout:fixed;受益table-layout:fixed; algorythm。 如果內容比設置的width （這是表格布局行為），則cell（ .boxes ）將增長。

您在這里獲得的唯一好處是，每個盒子都將具有相同的高度，並且大多數時候具有相同的寬度。

此外， table-cell不接受margin ，您需要在顯示的父table上設置border-spacing 。

代碼的一些修復，保持display: table / table-cell ，規則可以是：

 .box-outer { text-align: center; display: table; table-layout: fixed;/* useless if no width set */ background-color: #333; margin: auto;/* update */ border-spacing: 0.5vw 0;/* update */ } .boxes { vertical-align: middle; /* removed: width: 10% !important; ?? this allows 10 boxes ? margin-right: 1% !important; :( doesn't work on a cell . */ width: 20vw;/* update whatever value, it is equal to min-width in this table-layout */ background: #fff; border-radius: 6px; text-align: center; padding: 32px 29px; display: table-cell; } .field-number { color: #de008d; font-size: 48px; font-family: sans-serif; } .field-text { padding-top: 10px; color: #333; } 

 <div class="box-outer"> <div class="boxes"> <h4 class="field-number">83</h4> <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> </div> <div class="boxes"> <h4 class="field-number">7,800</h4><span class="field-text">mod tempor incididunt ut labor</span> </div> </div> <hr>Your 5 boxes: it breaks on small screen <hr> <div class="box-outer"> <div class="boxes"> <h4 class="field-number">83</h4> <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> </div> <div class="boxes"> <h4 class="field-number">7,800</h4><span class="field-text">mod tempor incididunt ut labor</span> </div> <div class="boxes"> <h4 class="field-number">65k</h4><span class="field-text">ut aliquip</span> </div> <div class="boxes"> <h4 class="field-number">37k</h4><span class="field-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> </div> <div class="boxes"> <h4 class="field-number">&#163;250m</h4><span class="field-text">veniam, quis nostrud exercitation ullamco</span> </div> </div> 

另一方面，每個人都會告訴您有關flex的信息，它可以更加靈活，也可以有所不同。

可以選擇flex以使您具有相同height .boxes ，但也可以使它們的內容在垂直和水平居中。 （也許在這一點上，您將考慮刪除display:table方法）

這是一個例子：

 .box-outer { text-align: center; display: flex; background-color: #333; justify-content:center; /* flex-wrap:wrap; *//* to allow boxes to wrap to next line(s) */ } .boxes { display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 0 1 16.5%;/* 5 boxes + margins tune this to your needs */ background: #fff; border-radius: 6px; text-align: center; padding: 32px 29px; margin: 1% 0.5%;/*tune to your needs, Note: vertical margin/padding in % is calculated from width */ } .field-number { color: #de008d; font-size: 48px; font-family: sans-serif; } .field-text { padding-top: 10px; color: #333; } 

 <p>5 boxes on small screen breaks too with flex, you may want to allow wrapping ? Less than 5 boxes is to be seen below </p> <div class="box-outer"> <div class="boxes"> <h4 class="field-number">83</h4> <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> </div> <div class="boxes"> <h4 class="field-number">7,800</h4><span class="field-text">mod tempor incididunt ut labor</span> </div> <div class="boxes"> <h4 class="field-number">65k</h4><span class="field-text">ut aliquip</span> </div> <div class="boxes"> <h4 class="field-number">37k</h4><span class="field-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> </div> <div class="boxes"> <h4 class="field-number">&#163;250m</h4><span class="field-text">veniam, quis nostrud exercitation ullamco</span> </div> </div> <hr> <div class="box-outer"> <div class="boxes"> <h4 class="field-number">83</h4> <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> </div> <div class="boxes"> <h4 class="field-number">7,800</h4><span class="field-text">mod tempor incididunt ut labor </span> </div> <div class="boxes"> <h4 class="field-number">65k</h4><span class="field-text">ut aliquip</span> </div> </div> 

關於flex模型的有用的教程或提醒： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/