2016-09-21 130 views
-3

考虑以下小提琴:CSS垂直中心

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; 
} 

回答

2

如果你想重叠,那么你需要使用定位。

在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>

0

我想获得一个包含“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>