i trying myself bit on website layout. have started designing page.
i want start page divided horizontal division line. far, good. each of 2 fields needs text , want text have vertical align: bottom.
my research on internet got me result there no real possibility <div> tags. there 1 table cell.
my html code looks that:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>title</title> <link href="firstpage.css" rel="stylesheet" type="text/css"> </head> <section class="half"> <div class="titletext"> text <br> text </div> </section> <section class="half"> <div class="titletext"> text <br> text </div> </section> <body> </body> </html> and css class looks that:
@charset "utf-8"; * { margin: 0; padding: 0; } html, body, #container { height: 100%; font-family: 'corbertregular', arial, sans-serif; font-size:24px; } header { height: 50px; background: gray; } main { height: calc(100% - 50px); background: green; } .half { height: 50%; position: relative; } .half:first-child { background: #f3a008; } .half:last-child { background: #950049; } .titletext{ text-align:center; display: table-cell; vertical-align: bottom; } i have found site useful solution, not work me....
http://phrogz.net/css/vertical-align/
what doing mistake?
change class in css:
.titletext{ text-align: center; display: table-cell; position: absolute; bottom: 0; } 
Comments
Post a Comment