Как центрировать весь элемент на основе дочернего элемента? - PullRequest
Новая
       14

Как центрировать весь элемент на основе дочернего элемента?

1 голос
/ 09 апреля 2020

Изображение, показывающее центральную линию, где должно быть "vs"

Я постараюсь объяснить свою проблему настолько ясно, насколько смогу. Здесь я пытаюсь сделать так, чтобы "против" в центральной линии и левый и правый элементы текли рядом с ней.

Я пытался использовать flex-box, но он центрирует все, как вы можете видеть на фотографии выше, но не то, чего я пытаюсь достичь.

Спасибо!

Вот фрагмент того, что я пробовал: 

<div class='flex page-container'>
      <div class='flex team-name'>
        THIS TEAM NAME IS LONG
        <img class='team-logo' src={TEAM_1_LOGO} />
      </div>
      <div class='vs'>VS</div>
      <div class='flex team-name'>
        <img class='team-logo' src={TEAM_2_LOGO} />
        SHORT NAME
      </div>
</div>

.flex {
  display: flex;
}

.page-container {
  align-items: center;
  justify-content: center;
  margin: 1.5rem;
  max-height: 9rem;
  overflow: hidden;

  .team-name {
    align-items: center;
  }
  .team-logo {
    height: 6rem;
    max-width: 7rem;
    margin: 0 5rem;
    overflow: hidden;
  }
  .vs {
    align-self: center;
  }
}

Ответы [ 2 ]

3 голосов
/ 09 апреля 2020

flex-basis:0, чтобы гарантировать, что элементы действительно разделяют доступное пространство, вместо того, чтобы сначала вычислять содержимое каждого элемента Flex, а затем распределить оставшееся пространство.

Остальное - просто простое выравнивание.

flex: 1 0 0; это сокращение от 

flex-grow:1;   // make element grow
flex-shrink:0; // prevent element from shrinking (preference really)
flex-basis:0;  // ignore content width


/* Just for illustrating, To be removed */

body * {
  border: 1px solid;
  padding: 10px;
}

[center] {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem;
}


/* ============ */

.flex {
  display: flex;
}

.page-container {
  margin: 1.5rem;
  max-height: 9rem;
  overflow: hidden;
  align-items: center;
}

.team-name {
  flex: 1 0 0;
  align-items: center;
  justify-content: flex-end;
}

.team-logo {
  max-height: 6rem;
  max-width: 7rem;
  overflow: hidden;
  margin: 0 10px;
}

.vs {
  margin: 0 10px;
}

.team-name~.team-name {
  justify-content: flex-start;
}
True center example
<div center="">
  <div>VS</div>
</div>

<div class="flex page-container">
  <div class="flex team-name">
    THIS TEAM NAME IS LONG
    <img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg">
  </div>
  <div class="vs">VS</div>
  <div class="flex team-name">
    <img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg"> SHORT NAME
  </div>
</div>
0 голосов
/ 09 апреля 2020

Попробуйте 

.page-container {
  justify-content: space-between;
}

Или 

.page-container {
  justify-content: space-evenly;
}

, если вы не хотите, чтобы названия команд были выровнены по краям

...