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