HTML/CSS 文本从 div 顶部对齐

Posted 2023-03-06

【中文标题】HTML/CSS 文本从 div 顶部对齐

【英文标题】：HTML/CSS text align from top of div

【发布时间】：2013-03-14 02:32:25

【问题描述】：

我的文本从 div 顶部对齐有问题。

这里是 html：

<div id="services">

        <div class="langelis">
            <div class="icon">
                <img src="images/knyg.jpg"  />
            </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 的中心对齐？感谢您的帮助

【问题讨论】：

文本要垂直居中还是水平居中？

我想从 div 的顶部垂直对齐。

【参考方案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"  />
            </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>

【参考方案2】：

垂直对齐见这个简单的例子：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

【讨论】：

我看过这个教程，但对我没有帮助；/

本教程的问题在哪里？这很简单。这里也有很多关于 SO 的相关问题，试着找找吧。