how to center vertically text with adding/updating only css code and very small html code update -
i have html code generated wordpress plugin , want center vertically text on right.i cannot change html code because it's generated plugin (i have check if im allowed modify soruce code). in html code div tag can swapped or modified in way.
but idea if text can center vertically updating existing css class definitions , changing starting , ending divs in html code?
html code:
<div> <a class="tptn_link" rel="bookmark" href="http://localhost/wordpress/?p=30"> <img class="tptn_thumb" border="1" style="max-width:100px;max-height:100px;" title="post taxtips" alt="post taxtips" src="http://localhost/wordpress/wp-content/plugins/top-10/timthum…2ftaxhug%2fimages%2ffeatured-taxtips.png&w=60&h=60&zc=1&q=75"></img> </a> <span class="tptn_after_thumb"> <a class="tptn_link" rel="bookmark" href="http://localhost/wordpress/?p=30"> <span class="tptn_title"> post taxtips </span> </a> <span class="tptn_list_count"> (14) </span> </span> </div>
css code:
.tptn_thumb{ margin-right: 10px; float: left; } /* popular post title*/ .tptn_after_thumb{ } .tptn_after_thumb:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
if tptn_thumb
has fixed height can use line-height: 42px;
on tptn_title
edit:
sorry, read "vertically" instead of "horizontally". solution vertical alignment.
edit2:
you need add css code:
.tptn_title { line-height: 42px; }
and remove line-height
.tptn_thumb{
see updated fiddle
Comments
Post a Comment