Question

我试图使用align-self水平居中.before-text。它在Chrome和Firefox中运行良好，但当然不适用于IE。

Stack snippet

＆＃13;

.box {
  background-color: tomato;
  padding: 20px;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.before-text {
  position: absolute;
  top: 15px;
  font-size: 11px;
  align-self: center;
}

＆＃13;

<div class="box">

  <div class="before-text">Pre-Header Text</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ratione accusantium, porro consequatur, velit praesentium laboriosam, fuga sapiente sequi neque recusandae officia. Consequuntur temporibus fugit deserunt cupiditate libero blanditiis
    veritatis.
  </p>

</div>

＆＃13;

Answer 1

不，它没有，您需要transform: translate才能在IE（和Safari）中完成这项工作

主要原因是规格。已经改变，到目前为止只有Chrome / Firefox / Edge已经赶上，好消息是，这项工作跨浏览器。

Updated fiddle

Stack snippet

＆＃13;

.box {
  position: relative;
  background-color: tomato;
  padding: 20px;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.before-text {
   position: absolute;
   top: 15px;
   font-size: 11px;
   left: 50%;
   transform: translateX(-50%);
}

＆＃13;

<div class="box">

  <div class="before-text">Pre-Header Text</div>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ratione accusantium, porro consequatur, velit praesentium laboriosam, fuga sapiente sequi neque recusandae officia. Consequuntur temporibus fugit deserunt cupiditate libero blanditiis veritatis.</p>
  
</div>

＆＃13;

在绝对定位元素上使用Flex propety align-self - 在IE11中不起作用

1 个答案: