将元素居中,直到内容足够长,然后对齐顶部?

时间:2018-09-01 10:34:52

标签: html css flexbox vertical-alignment

我有一组项目,在下面显示带有标题和文本的图标(图像)。

主要正常运行。但是,在某些页面上,每个项目都没有一段文字,只有标题。因此,当图标仅在标题旁边水平显示时,当标题对齐顶部时,它看起来很奇怪。

我的问题是,是否有可能将图标居中放置在文本旁边,直到内容高到足以击中图标/容器的顶部?

带有标题和文本(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 :(得分:1)

您可以使用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>