Aligning Text at the Top of a Div Using HTML/CSS

To align the last line of text in three

elements, you can use the text-align-last property with different values for each element. For instance, p.a can have a value of right, p.b can have a value of center, and p.c can have a value of justify. You can also change the text direction of an element using the direction and unicode-bidi properties. For example, setting direction to rtl and unicode-bidi to bidi-override can change the text direction. Additionally, you can set the vertical alignment of an element using the text-align property. For instance, you can use text-align: justify to justify the text vertically. Lastly, the text-align-last property can determine how to align the last line of a text.

Question:

The alignment of my text from the top of the divs is causing issues.

HERE IS HTML:

knyga

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

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

The printing and typesetting industry has been using Lorem Ipsum as the standard dummy text for centuries. It is simply a placeholder text that has no meaning.

Could you assist me in aligning the .txt div away from its center? I appreciate your support.


Solution 1:

To begin with, it’s important to correct your CSS selectors as currently, it’s not possible to write all those IDs in the same manner.

#content #main #services

Simply choose a single element along with its corresponding child. As an illustration, if you give it a try, it will function perfectly.

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

}

To align
vertical align
at the center of the .txt div, you can use this method:

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

knyga

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


Solution 2:


Check out this simple illustration for
vertical alignment
at http://www.jakpsatweb.cz/
css/css-vertical
-center-solution.html.

Frequently Asked Questions

Posted in Css