Question

考虑以下小提琴：

我希望将包含“BP”的span与colorName span垂直居中，无论有多少colorName。

如果可能的话，如果任何colorName足够长到达那里，我也希望“BP”重叠。

随意建议对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元素。

另外，我切换了＆＃34; colorname＆＃34;范围从inline-block到普通block。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

CSS垂直中心

2 个答案: