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

我正试图实现这一简单的通知块设计

包括在较小屏幕上包装文本块的响应能力，如下所示

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

展示了一种更简单的方法（可能是迄今为止最接近的方法），我一直在努力实现这一点

*，
html{
字体系列：arial；
字体大小：20px；
}
1.多排{
文本对齐：居中；
填充：1em；
边框：1px实心#eee；
背景色：#ccc；
}
.通知{
文本对齐：居中；
颜色：#fff；
空白：nowrap；
}
.通知圈{
宽度：150px；
高度：150像素；
背景色：#3D7A1A；
-moz边界半径：75px；
-webkit边界半径：75px；
边界半径：75px；
位置：相对位置；
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示：内联flex；
-webkit-flex-align：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
证明内容：中心；
}
.通知图标{
字号：5em；
}
.通知栏{
最小高度：150px；
线高：150px；
显示：内联块；
左边距：-30px；
垂直对齐：顶部
}
.通知块跨度{
背景色：#54A127；
填充：1em；
左侧填充：50px；
}

这是上面的一排

我
Lorem ipsum Door sit amet，Concetetur Adipsicing Elite。

下面是一排

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

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

此调整可能就是您所需的全部：

.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; }

注:

使包装器成为flex容器

将两个flex子项垂直居中（

.notification circle

和

.notification block

）

不要长大。不要退缩。保持固定在150px宽度

更改自

左边距：-30px

从

span

子级重新定位代码

确保

。通知块

不重叠

。通知圈

---

非常好@Michael_B，感谢您花时间如此清晰地记录这些变化。在.notification容器中添加

justify content:center

，使我的布局完全符合我的要求。非常感谢！