この通知デザインを実装してそれに感応して応答させる方法

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>

縦に、このようにテキストをセンタリングするかなりの数の提案があります、ほとんどがテキストをラップして、ここで問題です行の高さに依存しているように見えます。

これは、行の高さを使用する最善の方法ではないかもしれないが、ここで問題があります。

1. 環状容器とテキストコンテナを包むのを防ぐ。 ラッピング。
2. 静止テキストブロックの全高/垂直方向中心位置を維持しながら容器内のテキストをラッピング。
3. 感嘆符のある行の高さでテキストを折り返します。

.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. 垂直センターの両方フレックス子供（.notification-circleと.notification-block）
3. 成長しないでください。縮小しないでください。 150pxの幅に固定したままにします。 span子
4. からmargin-left: -30px
5. 移転コードから変更
6. が.notification-blockが.notification-circle