Question

我正在尝试对齐 - 图像的垂直中间与paragrapth但它不起作用。我正在使用container_16作为身体。这是我的代码：

HTML：

<div id class="container_16">
        <header class="grid_16">
            <!-- Header -->         
        </header>
        <div class="grid_16">
            <!-- Nav Menu -->
        </div>
        <div class="grid_14 alpha block">
            <!-- Body -->
                <div class="grid_3 alpha">
                    <img src="img/test1.png" alt="test1.png" class="midImg">
                </div>
                <div class = "grid_11 omega">
                    <p>Mea ne integre temporibus contentiones, menandri adipisci percipitur in mel. Quo ferri veritus suscipiantur ei, sit ex voluptua consequuntur. Diceret menandri inimicus mel cu. No quod libris inimicus pro, pri postea patrioque omittantur no, nihil legimus urbanitas eos ut. Duo tota inani eu, id minim semper inermis vix.Mea ne integre temporibus contentiones, menandri adipisci percipitur in mel. Quo ferri veritus suscipiantur ei, sit ex voluptua consequuntur. Diceret menandri inimicus mel cu. No quod libris inimicus pro, pri postea patrioque omittantur no, nihil legimus urbanitas eos ut. Duo tota inani eu, id minim semper inermis vix.</p>
                </div>      
        </div>


            <div class="grid_16 alpha"> 
                <footer>
            <!-- Footer -->
                </footer>
            </div>

CSS：

    .block {
    margin:0 auto;
    background: rgba(119,115,111,0.24);
    font-family:"Comfortaa", cursive;
    font-weight:300;
    box-shadow: 10px 10px 5px #888888;
    padding-top: 15px;  
    padding-bottom: 15px;   
    padding-left: 15px; 
    padding-right: 15px;    
}

    .midImg {
        vertical-align: middle;
    }

我的代码中没有包含grid960类的其余部分。

这是我得到的结果： https://www.dropbox.com/s/30dpc3afl0le72l/result.jpg

Answer 1

margin-top:auto;
margin-bottom:auto;

在你体内

图9的多个中间垂直对齐与段落使用网格960

1 个答案: