Sunday 27 March 2016

html - How do I vertically align text in a div?



I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.






.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;

text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Answer



Vertical Centering in CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html



Article summary:



For a CSS 2 browser, one can use display:table/display:table-cell to center content.




A sample is also available at JSFiddle:





div { border:1px solid green;}




everything is vertically centered in modern IE8+ and others.








It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using # to hide styles from newer browsers:






div { border:1px solid green;}


"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">

everything is vertically centered







No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...