我可以使用仅在与Divs关联的伪元素内的CSS属性水平对齐两个DIV

Question

我有两个divs。我想使用::before和/或::after水平对齐它们。浮点，显示等应仅应用于伪元素，而不应将其与之相关的两个divs应用于伪元素。 o1和 o2是两个divs的类属性值。

.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

no

我认为您会使单元素可以通过在 parent 中垂直居中的想法感到困惑。>。

* {-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 属性可以应用于块级兄弟姐妹divs的伪元素，这些divs可以垂直将这些divs彼此对齐。

您需要将其他样式应用于元素本身。或其 parent element ，在这种情况下，有各种选项可以使子元素垂直对齐。

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