html - 我可以仅在与 div 关联的伪元素内使用 CSS 属性水平对齐两个 div 吗？

Question

我有两个 div。我想使用 ::before 和/或 ::after 水平对齐它们。 float 、显示等应仅应用于伪元素，而不应应用于它们关联的两个 div。o1和o2是两个div的class属性值。

.o1 {
      border: 10px solid red;
      border-radius: 50px;
      width:30px;
      height:30px;
    }

    .o1::after {    } 

    .o2 {
      border: 10px solid orange;
      border-radius: 50px;
      width:30px;
      height:30px;
    }

    .o2::before {    } 

<div class="o1"></div><!--
    --><div class="o2"></div>

Answer 1

没有

我认为您混淆了单个 元素可以通过在父级 上使用伪元素而在父级 中垂直居中的想法>.

* {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

.o1 {
  border: 10px solid red;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  vertical-align: middle;
  display: inline-block;
}

.parent {
  height: 90px;
  background: pink;
  white-space: nowrap;
}

.parent::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

<div class="parent">
  <div class="o1"></div>
</div>

但是，您会注意到，这不仅需要父元素，还需要目标元素的其他属性，即:

  vertical-align: middle;
  display: inline-block;

NO 属性可应用于 block 级兄弟 div 的伪元素，这些伪元素将使这些 div 彼此垂直对齐。

您需要对元素本身或其父元素 应用额外的样式，在这种情况下，子元素的垂直对齐方式有多种选择。

.o1 {
  border: 10px solid red;
  border-radius: 50px;
  width:30px;
  height:30px;
}

.o2 {
  border: 10px solid orange;
  border-radius: 50px;
  width:30px;
  height:30px;
}

[class^="o"] {
  display: inline-block;
  vertical-align: middle;
}

<div class="o1"></div><!--
--><div class="o2"></div>