我有一组项目,其中显示一个图标(图像)与标题+文本下面。
这基本上工作正常。然而,在某些页面上,每个项目都没有一段文字,只有一个标题。因此,当图标水平地显示在标题旁边时,当标题与顶部对齐时,它看起来很奇怪。
我的问题是,是否可以将图标放在文本旁边居中,直到内容足够高,可以触及图标/容器的顶部?
标题+文本(1)示例:https://codepen.io/moy/pen/YOZyeG
只有标题(2)的示例:https://codepen.io/moy/pen/RYpWBp
如您在移动设备的示例(1)中所见,当文本填充相同内容时,图标的响应性很好。
在第二个例子(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>

最佳答案

你可以用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>

10-05 21:01
查看更多