Центрировать элементы, пока содержимое не станет достаточно длинным, а затем выровнять по верху? - PullRequest
Новая
       12

Центрировать элементы, пока содержимое не станет достаточно длинным, а затем выровнять по верху?

0 голосов
/ 01 сентября 2018

У меня есть группа элементов, которые отображают значок (изображение) с заголовком + текст ниже.

Это в основном работает нормально. Однако на некоторых страницах нет абзаца текста для каждого элемента, только заголовок. Поэтому, когда значок отображается горизонтально рядом с заголовком, он выглядит странно, если заголовок выровнен по верху.

У меня вопрос: можно ли расположить значок рядом с текстом, пока содержимое не станет достаточно высоким, чтобы попасть в верхнюю часть значка / контейнера?

Пример с заголовком + текст (1): https://codepen.io/moy/pen/YOZyeG

Пример только с заголовком (2): https://codepen.io/moy/pen/RYpWBp

Как вы можете видеть в примере (1), на мобильных устройствах иконки работают хорошо, так как текст заполняется одинаково.

Во втором примере (2) заголовок расположен в верхней части значка, который выглядит немного дерьмово!

Я попытался расположить заголовок вертикально рядом со значком, но затем, когда текст добавлен, он выглядит странно. Так можно ли центрировать значки до тех пор, пока заголовок / текст не займет достаточно вертикального пространства, чтобы попасть в верхнюю часть контейнера, тогда он будет просто выровнен по верху?

Или мне понадобятся 2 разных класса, например .features, а затем .features--centred или .features--no-text для элементов с не таким большим содержанием?

Заранее спасибо, завязывая здесь узлы! 

/**
 * Base `html` styling.
 */
 
html {
  background: white;
  font-size: 62.5%;
}

/**
 * Base `body` styling.
 */
 
body {
  background-color: white;
  color: grey;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
  padding: 30px 0 0;
  text-rendering: optimizeLegibility;
}

@media (min-width: 64em) {

  body {
    font-size: 14px;
    font-size: 1.4rem;
  }
  
}

/* ==========================================================================
   #FEATURES
   ========================================================================== */
/**
 * Features/service panel. Each item has an icon, title and short text entry.
 *
 * 1. The number of items can change from 5 - 6, so I've set flex-direction to
 *    'row' on desktop (when the items are in a row) so the items will always be
 *    spaced evenly.
 * 2. Need to overwrite `align-items` so the icons are vertically aligned to the
 *    top of the container.
 */
 
.features {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}

.features:before,
.features:after {
  content: "";
  display: table;
}

.features:after {
  clear: both;
}

@media (min-width: 48em) {

  .features {
    display: block;
    margin-left: -30px;
  }
  
}

@media (min-width: 64em) {

  .features {
    margin-left: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  
}

/**
 * The wrapper for each featured item that contains an icon, title and short
 * sentence.
 *
 * 1. I've removed the width, which was always 20% as there were always 5 items
 *    but now that can change and we've added `flex-direction: row;` to the
 *    parent div we shouldn't need it.
 * 2. Make items have equal widths. If not applied they'll be uneven.
 * 
 */
 
.features__item {
  background: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 65px;
  width: 100%;
  max-width: 500px;

}

.features__item:before,
.features__item:after {
  content: "";
  display: table;
}

.features__item:after {
  clear: both;
}

@media (min-width: 48em) {

  .features__item {
    float: left;
    padding: 0 0 0 95px;
    width: 50%;
    max-width: none;
  }
  
  .features__item:nth-child(odd) {
    clear: left;
  }
  
}

@media (min-width: 64em) {

  .features__item {
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
    padding: 0 15px;
    width: auto;
  }
  
  .features__item:nth-child(odd) {
    clear: none;
  }
  
}

.features__icon-wrap {
  background-color: teal;
  border-radius: 100%;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin: 0 0 30px -65px;
  float: left;
  text-align: center;
  width: 50px;
}

.features__icon-wrap .icon {
  fill: white;
  height: 25px;
  width: 25px;
}

@media (min-width: 64em) {

  .features__icon-wrap {
    float: none;
    margin-left: 0;
    height: 100px;
    line-height: 100px;
    width: 100px;
  }
  
  .features__icon-wrap .icon {
    height: 50px;
    width: 50px;
  }
}

.features__title {
  color: black;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 7.5px;
}

@media (min-width: 64em) {
  .features__title {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.features__text {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.4;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900|Roboto:400,400i,700,700i" rel="stylesheet">

<ul class="features">
  <li class="features__item">
    <div class="features__icon-wrap">
      <svg class="icon icon--24-hour"><use xlink:href="img/sprite/sprite.svg#icon-24hour"></use></svg>
    </div>
    <h3 class="features__title">Lorem ipsum dolor</h3>
    <p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </li>
  <li class="features__item">
    <div class="features__icon-wrap">
      <svg class="icon icon--room"><use xlink:href="img/sprite/sprite.svg#icon-room"></use></svg>
    </div>
    <h3 class="features__title">Lorem ipsum dolor</h3>
    <p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="features__item">
    <div class="features__icon-wrap">
      <svg class="icon icon--rosette"><use xlink:href="img/sprite/sprite.svg#icon-rosette"></use></svg>
    </div>
    <h3 class="features__title">Lorem ipsum dolor</h3>
    <p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
  </li>
  <li class="features__item">
    <div class="features__icon-wrap">
      <svg class="icon icon--taxi"><use xlink:href="img/sprite/sprite.svg#icon-taxi"></use></svg>
    </div>
    <h3 class="features__title">Lorem ipsum dolor</h3>
    <p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
  </li>
  <li class="features__item">
    <div class="features__icon-wrap">
      <svg class="icon icon--ticket"><use xlink:href="img/sprite/sprite.svg#icon-ticket"></use></svg>
    </div>
    <h3 class="features__title">Lorem ipsum dolor</h3>
    <p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet.</p>
  </li>
</ul>

1 Ответ

0 голосов
/ 01 сентября 2018

Вы можете сделать это с flexbox. Вы делаете текст всегда по центру и значок flex-start. Когда текст выше, центр будет эквивалентен flex-start.

Вот упрощенный пример: 

.box {
  max-width: 320px;
  display: flex;
  align-items: flex-start;
  border: 1px solid;
}

.icon {
  width: 80px;
  height: 80px;
  background: teal;
  margin-right:10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.text {
  align-self: center;
  border: 1px solid;
}

h3,p {
  margin: 5px 0;
}
<div class="box">
  <div class="icon"></div>
  <div class="text">
    <h3>a title</h3>
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel orci orci. Suspendisse ultrices velit sit amet venenatis venenatis. Pellentesque non leo nec ipsum pulvinar aliquet ut ac lorem</p>
  </div>
</div>

<div class="box">
  <div class="icon"></div>
  <div class="text">
    <h3>a title</h3>
  </div>
</div>
<div class="box">
  <div class="icon"></div>
  <div class="text">
    <h3>a title</h3>
    <p>orem ipsum dolor sit amet, </p>
  </div>
</div>
...