CSS垂直中心

Question

考慮以下小提琴：

https://jsfiddle.net/q5t26m0b/

我想獲得一個包含「BP」與colorNamespan S，垂直居中span無論colorName使用多少有。

如果可能的話，我還想讓「BP」重疊，如果任何colorName足夠長的話可以到達那裏。

隨意提出對HTML或CSS所需的任何更改。

<div class="wide-field"> 
<div class="info-area" id="colorlist-textarea"> 
<div class='artboard-colors'> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='artboard-id'>BP</span> 
</div> 
</div> 
</div> 

.wide-field { 
display: inline-block; 
width: 98%; 
} 

.info-area { 
border: 1px solid black; 
font-size: 14px; 
width: 100%; 
resize: none; 
overflow: auto; 
padding: 5px; 
} 

#colorlist-textarea { 
height: 15em; 
} 

.artboard-colors 
{ 
display: inline-block; 
width: 100%; 
border: 1px dashed darkgreen; 
padding: 1px; 
margin: 1px; 
} 

.colorName 
{ 
display: inline-block; 
vertical-align:middle; 
border:solid black 1px; 
width: 75%; 
} 

.artboard-id 
{ 
float: right; 
text-align: right; 
display: inline-block; 
vertical-align:middle; 
width: 20%; 
border: 1px solid #d1c7ac; 
} 

Answer 1

如果你想重疊，那麼你需要使用定位。

在BP元素上使用絕對定位允許我們將其位置修改爲父div高度的50％（通過變換進行調整），並允許它位於顏色條的頂部。

注：我已經刪除了75％的酒吧寬度，因爲這意味着他們永遠不會到達BP元素。

此外，我將「顏色名稱」跨度從inline-block改爲普通舊block。

.wide-field { 
 
    display: inline-block; 
 
    width: 98%; 
 
} 
 
.info-area { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    width: 100%; 
 
    resize: none; 
 
    overflow: auto; 
 
    padding: 5px; 
 
} 
 
#colorlist-textarea { 
 
    height: 15em; 
 
} 
 
.artboard-colors { 
 
    display: inline-block; 
 
    width: 100%; 
 
    border: 1px dashed darkgreen; 
 
    padding: 1px; 
 
    margin: 1px; 
 
    position: relative; 
 
} 
 
.colorName { 
 
    display: block; 
 
    border: solid black 1px; 
 
} 
 
.artboard-id { 
 
    position: absolute; 
 
    right: 0; 
 
    width: 20%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: right; 
 
    vertical-align: middle; 
 
    border: 1px solid #d1c7ac; 
 
    background: lightblue; 
 
}

<div class="wide-field"> 
 
    <div class="info-area" id="colorlist-textarea"> 
 
    <div class='artboard-colors'> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='artboard-id'>BP</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我想獲得一個包含「BP」與colorName跨度垂直居中，不管有多少colorNames有跨度。

此代碼應解決此問題。它是this的修改版本，它使用絕對定位而不是相對的，所以無論有多少<span class='colorName'>都是靈活的。

.wide-field { 
 
    display: inline-block; 
 
    width: 98%; 
 
} 
 

 
.info-area { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    width: 100%; 
 
    resize: none; 
 
    overflow: auto; 
 
    padding: 5px; 
 
} 
 

 
#colorlist-textarea { 
 
    outline: 1px dashed red; 
 
    position: relative; 
 
} 
 

 
.artboard-colors { 
 
    display: block; 
 
    width: 100%; 
 
    border: 1px dashed darkgreen; 
 
    padding: 1px; 
 
    margin: 1px; 
 
} 
 

 
.colorName { 
 
    display: block; 
 
    border:solid black 1px; 
 
    width: 75%; 
 
} 
 

 
.artboard-id { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    right: 0; 
 
    text-align: right; 
 
    width: 20%; 
 
    border: 1px solid #d1c7ac; 
 
    display: block; 
 
}

<div class="wide-field"> 
 
    <div class="info-area" id="colorlist-textarea"> 
 
    <div class='artboard-colors'> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
    </div> 
 
    <span class='artboard-id'>BP</span> 
 
    </div> 
 
</div>