HTML/CSS 文本從 div 頂部對齊

Question

我的文本從 divs 頂部對齊有問題。

這是 HTML：

<div id="services">

        <div class="langelis">
            <div class="icon">
                <img src="images/knyg.jpg" alt="knyga" />
            </div>

            <div class="txt">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>

這是 CSS：

#content #main #services {
    width: 1010px;
    height: auto;
    min-height: 320px;
    margin: 50px auto;
}

#content #main #services .langelis {
    width: 510px;
    height: auto;
    min-height: 140px;
    position: relative;
    border: 1px #000 solid; 
}

#content #main #services .langelis .icon {
    width: 65px;
    min-height: 140px;
    height: auto;
    float: left;
    border: 1px #000 solid;
}

#content #main #services .langelis .txt {
    width: 440px;
    height: auto;
    float: left;
    border: 1px #000 solid;
}

如何制作文字

Lorem Ipsum Lorem Ipsum 只是印刷和排版行業的虛擬文本。 自 1500 年代以來，Lorem Ipsum 一直是行業標准的虛擬文本。

從 .txt div 的中心對齊？ 謝謝你的幫助

Answer 1

首先你需要修復你的 css 選擇器。
你不能用這種方式寫出所有這些 id。

#content #main #services

只需選擇 1 個元素和他的孩子。
例如，如果您對此進行測試，它將與您一起使用：

#services .langelis .txt {
width: 440px;
height: auto;
float: left;
border: 1px #000 solid;
text-align:center;

}

如果你想讓它垂直對齊.txt div 的中心，你可以這樣做：

 #services { width: 1010px; height: auto; min-height: 320px; margin: 50px auto; } #content #main #services .langelis { width: 510px; height: auto; min-height: 140px; position: relative; border: 1px #000 solid; } #content #main #services .langelis .icon { width: 65px; min-height: 140px; height: auto; float: left; border: 1px #000 solid; } #services .txt { width: 440px; height: 500px; border: 1px #000 solid; display:table; text-align:center; } .sub{ display:table-cell; vertical-align:middle; text-align:center; }

 <div id="services"> <div class="langelis"> <div class="icon"> <img src="images/knyg.jpg" alt="knyga" /> </div> <div class="txt"> <div class="sub"> <h1>Lorem Ipsum</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p> </div> </div> </div> <div class="clear"></div> </div>

Answer 2

對於垂直對齊，請參閱這個簡單的示例： http : //www.jakpsatweb.cz/css/css-vertical-center-solution.html