'HTML/CSS text align from top of div

I have problem with my text align from divs top.

HERE IS 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>

HERE IS 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;
}

HOW to make text

Lorem Ipsum 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..

align from center of .txt div? Thanks for your help

csshtmltextalignment


Solution 1:[1]

well at first you need to fix your css selectors.
you can't write all those id's by this way.

#content #main #services

just select 1 element and his child.
for example if you test this it will work with you:

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

}

if you want it vertical align center of the .txt div you can do this :

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

Solution 2:[2]

For vertical alignment see this easy example: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 darthmaim

Related Questions