html - 垂直定位相对容器中的 block 级元素

Question

我目前正在尝试实现这种效果:

我已经非常接近了，这是我目前所拥有的:

JSFIDDLE DEMO

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