Question

我正在尝试使div中的文本左对齐，该div占据其父级的全部宽度。

这是使用Angular的Flex布局创建的几个链接之一的结构。

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
  <a mat-flat-button color="primary" fxFlex href="https://example.com/">
    <div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
    <div class="hoverOn">
      <div class="text">
        Is your request causing an impact to a business-critical function, which is impacting daily production?
      </div>
    </div>
  </a>
  ......
</div>

在没有悬停的情况下，.hoverOff元素是可见的。悬停期间，.hoverOn元素会滑过.hoverOff元素。

.hoverOn使用position: absolute保持隐藏直到悬停。

在text-align: left的左边添加.text可以使文本像我想要的那样对齐，但是它位于div的左边缘，而不像我想要的那样位于中心。

我创建了一个example for this，CSS在下面。

a {
  color: white !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

a .hoverOn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00539b;
  overflow: hidden;
  height: 0;

  border-radius: 4px;
  width: 99%; /* Prevents flicker on bottom corners  */
  margin: 0 auto; /* Centers div for new width  */
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Material's Standard easing */
}

.text {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  position: relative;
  padding: 5px;
  text-align: left;
}

a:hover .hoverOn {
  height: 100%;
}

我该如何解决？

以全角div对齐文本

0 个答案: