Как выровнять внутри
?

Question

Я хочу сделать так, чтобы текст внутри <div> был выровнен по вертикали по центру.

.page-wrapper {
  display: flex;
  justify-content: space-between;
}

.left-wrapper {
  width: 25%;
  background-color: rgb(233, 233, 233);
}

.right-wrapper {
  width: 25%;
  background-color: rgb(233, 233, 233);
}

.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-content>div {
  width: calc(100% - 400px);
  border-radius: 5px;
  background-color: lightgray;
  height: 30px;
  margin: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

a {
  vertical-align: middle;
  text-decoration: none;
  color: black;
}

<div class="page-wrapper">
  <div class="left-wrapper">
    <div class="left-content">
    </div>
  </div>

  <div class="center-wrapper">
    <div class="center-content">
      <div>
        <a>
        A YouTuber on a Delta flight which made an emergency mid-Atlantic return to New York said he was 'sobbing' in his seat and thought he was going to die
        </a>
      </div>
      <div>
        <a>
        Mega Millions reveals winning numbers for $1.28 billion jackpot</a>
      </div>
      <div>
        <a>
        Horrifying footage appears to show Russian captors castrating a Ukrainian prisoner of war
        </a>
      </div>
    </div>
  </div>

  <div class="right-wrapper">
    <div class="right-content">
    </div>
  </div>
</div>

Answer 1

используй на div в котором лежит a

display: flex
align-items: center

.container{
height: 100px; /* для демонстрации */
border: 1px solid red;  /* для демонстрации */
display: flex;
align-items: center;
}

<div class='container'>
  <a href='' class='item'> text </a>
</div>

БЛОГ НА HUSL

Как выровнять внутри
?

Ответы (1 шт):

БЛОГ НА HUSL

Как выровнять внутри ?

Ответы (1 шт):

Как выровнять внутри
?