從div頂部對齊HTML/CSS文本

Question

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

這裏是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存有 Lorem存有是印刷和排版的只是虛擬文本行業。 Lorem Ipsum自從16世紀以來一直是業界標準的虛擬文本..

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

Answer 1

對於垂直對齊看到這個簡單的例子：首先你需要修復你的CSS選擇器http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 2

以及 。
你不能通過這種方式編寫所有這些ID。

#content #main #services 

只選擇1個元素和他的孩子。
例如，如果你測試這一點，將與您一起：

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

}

，如果你想要的.TXT格可以做到這一點的垂直居中對齊：

#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>