display:table

#3 Возможности выравнивания с применением display:table etc

by roskoshinsky

HTML

<div class="object1" >
    <div class="object2" >
        <div class="object3" >
            <div class="object4" >
                <div class="object5" >
                    <p>Lorem 1</p>
                </div>
            </div>
        </div>
        <div class="object3" >
            <div class="object4" >
                <div class="object5" >
                    <p>Lorem 2</p>
                </div>
            </div>
        </div>
        <div class="object3" >
            <div class="object4" >
                <div class="object5" >
                    <p>Lorem 3</p>
                </div>
            </div>
        </div>
        <div class="object3" style="height:60%;" >
            <div class="object4" >
                <div class="object5" >
                    <p>Lorem 4</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.object1 {width: 400px; height: 300px; border: 1px solid red; background-color: yellow; }

.object2 {display: table; width: 100%; height:100%; border: 1px solid gray;}

.object3 {display: table-row; width: 100%; border: 1px dotted yellow; background-color:blue;}

.object4 {display: table-cell; vertical-align: top; text-align: center; border: 1px dashed white; background-color:chartreuse;}

.object5 {display:block; background-color:black; color:white;  border: 1px dashed blue; height:100%;}