css - Vertical allign text in div (browser proof) -
in wordpress, trying yellow title of news items (http://www.projectarthouse.nl/vvruurlo/over-ruurlo/nieuws/eerste-training-obbink-voetbalschool/) in vertical center of black div in featured image (always - when 1 line / 3 lines of text). in same way slider on homepage, text in slider navigation on right (http://www.projectarthouse.nl/vvruurlo/).
here uses display: table , vertical-align: middle on parend div , display: table-cell , vertical-align: middle on text inside of div.
however, doesn't work @ all. text stays alligned top. going wrong here?
you can use display inline-block in combination pseudo element this:
.headertitletext { display: inline-block !important; vertical-align: middle!important; } .headertitle:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; width: 1px; margin-right: -1px; } /* make sure remove float on .unskew */ .unskew { -webkit-transform: skew(10deg); -moz-transform: skew(10deg): -o-transform: skew(10deg); /* float: left; */ }
Comments
Post a Comment