使父母和垂直中心文本的子女全高

這個數字應該在一個「盒子」中，背景的高度和它自己的數字應該垂直和水平居中在「盒子」中。

我知道我可以在.number上做一些類似position: absolute; top: 0, left: 0的事情，但這會將其帶出文檔流程。和文字，實際的號碼不居中。

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.number { 
 
    background: skyblue; 
 
    /*position: absolute;*/ 
 
    top: 0; 
 
    bottom: 0; 
 
    vertical-align: middle; 
 
} 
 
.row > div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    position: relative; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

編輯1：你可以在盒子不是容器的整個高度的片段看到。這不是我想要的。

編輯2：我猜你可以通過使用漸變作弊，但然後我將不得不確保文本區域匹配數字框結束以使漸變看起來像顏色是數字「框」。

來源

2016-06-20 jack blank

使用 ~~flex~~ display: table-cell

更新1：展示如何創建「保證金」，而不使用單元格填充

更新2：顯示一個漸進增強當ava使用flex時ilable

*{ 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.number{ 
 
    background: skyblue; 
 
} 
 
.row > div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    position: relative; 
 
} 
 

 
/* 3 ways to create a left margin on textArea */ 
 
.row .textArea.nr1 { border-left: 10px solid transparent; } 
 
.row .textArea.nr2 { position: relative; left: 10px; } 
 
.row .textArea.nr3 { padding-left: 10px; } 
 

 
/* feature detect - use flex when available */ 
 
@supports (display: flex) { 
 
    .row > div { 
 
    display: block; 
 
    } 
 
    .row { 
 
    display: flex; 
 
    } 
 
    .row .number { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea nr1"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea nr2"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea nr3"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-06-20 19:03:33 LGSon

看起來不錯，但如果我想在'textArea'上留下餘量，它不會工作，所以我看着http://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table- cell-not-affected-by-margin，它在行的周圍填充填充效果，這是我不想要的。你將如何製作保證金？ –

@jackblank更新了我的答案，其中包括3個「邊距」選項，「填充左側」。 – LGSon

@jackblank更新了我的答案，以展示如何使用簡單的特徵檢測並獲得漸進式增強 – LGSon

你可以使用flexbox來實現這一點，所有的現代瀏覽器都支持它，而prefixes也可以在IE10上使用。

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    display: flex; 
 
} 
 
.number { 
 
    background: skyblue; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

或者，使用CSS表使其對舊版瀏覽器的工作了。

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.number, 
 
.textArea { 
 
    display: table-cell; 
 
} 
 
.number { 
 
    background: skyblue; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
} 
 
.textArea { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-06-20 19:02:13 Stickers

你在製作的網站使用Flexbox的？我需要任何polyfills或類似的東西嗎？我很緊張，用戶不會看到flexbox的影響，因爲他們可能沒有使用它的瀏覽器。它是一個新的。技術。對此有何評論？ –

是的，但它取決於你和你的項目，IE10 +的前綴，我還建議如果你需要它在舊版瀏覽器上工作的CSS表格佈局。 – Stickers

@jackblank許多人在生產網站上使用'flexbox'，因爲它具有[+ 90％的瀏覽器覆蓋率]（http://caniuse.com/#feat=flexbox），所以你不應該太擔心...並且它是推薦的方式，因爲它具有更靈活的方式來呈現用戶友好的佈局 – LGSon

*{ 
 
    box-sizing: border-box; 
 
} 
 
.container{ 
 
    width: 40%; 
 
} 
 
.number{ 
 
    background: skyblue; 
 
    /*position: absolute;*/ 
 
    top: 0; 
 
    bottom: 0; 
 
    vertical-align: middle; 
 
    height: 40px; 
 
    padding-top: 11px; 
 
} 
 
.row > div{ 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.row{ 
 
    background: lightgreen; 
 
    position: relative; 
 
}

<div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="number">10</div> 
 
\t \t \t <div class="textArea"> 
 
          <div class="companyName">Top title</div> 
 
\t \t \t \t <div class="industry">secondary text</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t </div>

來源

2016-06-20 19:14:46

使父母和垂直中心文本的子女全高

回答

相關問題