Выровнять текст по ширине по ширине - PullRequest
Новая
       7

Выровнять текст по ширине по ширине

0 голосов
/ 18 января 2019

Я пытаюсь выровнять текст по левому краю в div, который занимает всю ширину его родителя.

Это структура одной из нескольких ссылок, созданных с использованием Flex Layout от Angular. 

<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, а не в центре с полями, как хотелось бы.

Я создал пример для этого , а 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%;
}

Как мне это решить?

...