在相對容器中垂直放置塊級元素

Question

我目前正在嘗試實現此效果：

而且我已經很接近了，這是我到目前為止的結果：

JSFIDDLE演示

CSS：

.block {
            margin-top: 1em;
            position: relative;
            overflow: auto;
            height: 100%;
            width: 100%;
            float: left;
        }
        .icon {
            background: #000000;
            display: inline-block;
            height: 50px;
            width: 112px;
        }
        .line {
            position: absolute;
            background: #000099;
            width: 100%;
            height: 1px;
            z-index: -1;
            top: 50%;
            left: 0;
            margin-left: -416px;
        }
        .text {
            /*background: #004746;*/
            display: inline-block;
            position: relative;
            vertical-align: middle;
            max-width: 400px;
            float: right;
            border-left: 1px solid #000099;
            padding-left: 1em;
        }
        .text:after {
            content:"";
            background: #000099;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 1em;
            height: 1px;
        }
        .text:before {
            content:"";
            background: #000099;
            position: absolute;
            top: 0;
            left: 0;
            width: 1em;
            height: 1px;
        }
        .text p {
            padding: 0 0 1em 0;
        }
        .text p:last-child {
            margin: 0;
        }

HTML：

<div class="block">
    <div class="icon"></div>
    <div class="line"></div>
    <div class="text">
        <p>Lorem ipsum dolor sit amet, pri eu liber utroque quaestio, ei dicta quaeque sed. Civibus omnesque concludaturque vim eu, ex his nostro quodsi, graecis commune posidonium mei ad. Nam facilis alienum fastidii te, te quando euripidis usu. Torquatos consetetur suscipiantur mel eu, duo cu impedit feugait.</p>

        <p>Vocibus urbanitas suscipiantur pro ut, cu nisl nobis nonumy mel. Posse omnes urbanitas usu in, nusquam invidunt ad sed, mucius recusabo has ea. Aliquip voluptua ius eu, ex vix justo mundi, indoctum scripserit mei cu. Te sit tantas albucius probatus.</p>
    </div>
</div>

我唯一的問題是左側的框（“圖標”），需要與穿過的線垂直對齊。 但是盒子不能是絕對位置。

規則：

1. 必須響應。
2. 需要從IE8開始工作。
3. 需要考慮到以下事實：右側的文本是動態的，並且可能會增長或縮小。

Answer 1

將此代碼添加到您的.icon類中：

.icon {
   position: absolute;
   top: 50%;
   margin-top: -25px;
}