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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -