html - 如何相对于 sibling 垂直居中文本并添加 "connector"

Question

我有以下标记(可以更改) Plunkr :

  <div class="block-group">
    <div class="block-operator">And</div>
    <div class="block-children">
      <div class="block-group">
        <div class="block-container">number</div>
        <div class="block-container">&gt;</div>
        <div class="block-container">1</div>
      </div>
      <div class="block-group">
        <div class="block-container">city</div>
        <div class="block-container">=</div>
        <div class="block-container">"Testville"</div>
      </div>
    </div>
  </div>

我需要设计它的样式，让它做两件事:

• “AND”元素与其 block-children sibling 相比垂直居中
• 我想要一个“连接器”来将 sibling 链接到“AND”元素/文本

最终，它应该是这样的:

如何修改我现有的 CSS？

Answer 1

您需要将 vertical-align: middle 与子元素一起使用，而不是与容器一起使用，对于连接器，您可以使用伪元素和边框，您可以轻松控制其大小/位置:

.block-group {
  border: 1px solid #999;
}

.block-operator {
  display: inline-block;
  vertical-align: middle;
  margin:0 20px;
}

.block-children {
  display: inline-block;
  vertical-align: middle;
  position:relative;
}
.block-children:before {
  content:"";
  position:absolute;
  left:-10px;
  width:20px;
  top:8px;
  bottom:8px;
  border-left:2px solid;
  border-radius:50%;
}

.block-children>div {
  display: block;
  float: none;
}

.block-container {
  border: 1px solid #ddd;
  float: left;
  min-width: 40px;
  /* min-height: 30px; */
  padding: 4px;
  text-align: center;
  vertical-align: middle;
}

<div class="block-group">
  <div class="block-operator">And</div>
  <div class="block-children">
    <div class="block-group">
      <div class="block-container">field.number</div>
      <div class="block-container">&gt;</div>
      <div class="block-container">1</div>
    </div>
    <div class="block-group">
      <div class="block-container">administrativeDestination.city</div>
      <div class="block-container">=</div>
      <div class="block-container">"expression.value"</div>
    </div>
  </div>
</div>