html - 如何实现此通知设计并使其响应灵敏

Question

我正在尝试为通知 block 实现这个足够简单的设计。

包括通过在较小的屏幕上包裹文本 block 来响应的能力，类似于下面的内容；

此处的目的是将通知居中对齐到父行，并且最好是当视口(viewport)太小时，相应地增加其所在水平横幅的文本换行和高度。这将包含在 Bootstrap 元素中(可能会影响 float 等)。

Here is a pen展示了我一直在努力实现这一目标的一种更简单的方法(可能是迄今为止最接近的方法)。

*,
html {
  font-family: arial;
  font-size: 20px;
}
.extra-row {
  text-align: center;
  padding: 1em;
  border: 1px solid #eee;
  background-color: #ccc;
}
.notification {
  text-align: center;
  color: #fff;
  white-space: nowrap;
}
.notification-circle {
  width: 150px;
  height: 150px;
  background-color: #3D7A1A;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  border-radius: 75px;
  position: relative;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: inline-flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}
.notification-icon {
  font-size: 5em;
}
.notification-block {
  min-height: 150px;
  line-height: 150px;
  display: inline-block;
  margin-left: -30px;
  vertical-align: top
}
.notification-block span {
  background-color: #54A127;
  padding: 1em;
  padding-left: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row extra-row">
    <div class="col-lg-12">
      <p>This is a row above</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="notification">
        <div class="notification-circle"><span class="notification-icon">i</span>
        </div>
        <p class="notification-block"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        </p>
      </div>
    </div>
  </div>
  <div class="row extra-row">
    <div class="col-lg-12">
      <p>This is a row below</p>
    </div>
  </div>
</div>

有很多关于以这种方式垂直居中文本的建议，大多数似乎依赖于行高，这在此处环绕文本是一个问题。

由于使用行高，这可能不是最好的方法，但这里的问题是；

1. 防止圆形容器和文本容器包装。
2. 将文本包裹在容器内保持文本 block 的整体高度/垂直居中位置。
3. 用合理的行高包裹文本。

将 white-space: nowrap; 添加到 .notification 元素确实会阻止 #1，但会阻止文本换行，换行只会超出视口(viewport)。

谁能阐明更好的方法？如有任何想法，我们将不胜感激。

非常感谢，

啪啪啪。

Answer 1

希望这能让您走上正确的道路。

我删除了很多不必要的代码。我还删除了演示的前缀。

此调整可能就是您所需要的:

.notification {
     display: flex;                  /* 1 */
     align-items: center;            /* 2 */
     color:#fff;
}
.notification-circle {
     flex: 0 0 150px;                /* 3 */
     height: 150px;
     background-color: #3D7A1A; 
     border-radius: 75px;
     display: flex;
     align-items: center;
     justify-content: center;
}
.notification-block {
     margin-left: -50px;             /* 4 */
     background-color: #54A127;      /* 5 */
     padding: 1em;                   /* 5 */
     padding-left: 75px;             /* 5 */
     z-index: -1;                    /* 6 */
}
.notification-block span { }
.notification-icon { font-size: 5em; }

Revised Codepen

注意事项:

1. 使包装器成为 flex 容器
2. 将两个 flex 子项(.notification-circle 和 .notification-block)垂直居中
3. 不要成长。不要退缩。保持固定在 150 像素宽度。
4. 更改自 margin-left: -30px
5. 从 span child 重定位代码
6. 确保 .notification-block 不与 .notification-circle 重叠