如何实现此通知设计并使其做出明智的响应

Question

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

包括通过将文本块包裹在较小的屏幕上进行响应的能力，类似于以下内容；

此处的目的是将通知与父行居中对齐，并且最好在视口太小时，使其所在的水平横幅的文本换行和高度相应地增加高度。这将包含在引导项目中（可能会影响浮动等）。

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>

有很多建议以这种方式垂直居中文本，大多数似乎依赖于行高，这是文本换行的问题。

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

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

将white-space: nowrap; 添加到 .notification 元素确实会阻止 #1，但会阻止文本换行，这只是延伸到视口之外。

任何人都可以阐明更好的方法吗？任何想法将不胜感激。

非常感谢，

巴普斯。

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. 使包装器成为弹性容器
2. 垂直居中两个 flex 子项（.notification-circle 和 .notification-block）
3. 不要增长。不要收缩。保持固定在 150 像素宽度。
4. 从margin-left: -30px更改
5. 从spanchild 重新定位代码
6. 确保.notification-block 不重叠.notification-circle