Question

我有一些由Wordpress插件生成的HTML代码，我希望将文本垂直居中于右边。我无法更改HTML代码，因为它是由插件生成的（我必须检查是否允许我修改它索引代码）。在HTML代码中，只能以任何方式交换或修改DIV标记。

但我的想法是，只有通过更新现有的CSS类定义并仅更改HTML代码中的起始和结束DIV，此文本是否可以垂直居中？

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 for TaxTips" alt="Post for 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 for TaxTips

            </span>
        </a>
        <span class="tptn_list_count">

            (14)

        </span>
    </span>

</div>

CSS代码：

.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; 
}

Answer 1

如果tptn_thumb的高度固定，您可以line-height: 42px;使用tptn_title

编辑：

对不起，请阅读＆＃34;垂直＆＃34;而不是＆＃34;水平＆＃34;。我的解决方案是垂直对齐。

EDIT2：

您需要添加此css代码：

.tptn_title {
  line-height: 42px;
}

并从line-height

中删除.tptn_thumb{

请参阅updated FIDDLE

如何通过添加/更新css代码和非常小的html代码更新来垂直居中文本

1 个答案: