NO

Question

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

.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

我认为你通过在父上使用伪元素来混淆单个元素可以在父中垂直居中的想法>

* {-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 属性可应用于块级兄弟div的伪元素，这些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>

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

1 个答案:

NO