如何动态更改链接的行高或字体大小（<a>)?</a>

Question

以下是我的项目：

每个红色框都是一个链接。现在我将它们作为标签，其行高与盒子的高度相匹配，以便文本垂直居中。我遇到的问题是需要在磁贴上运行的文本太长。如果太长，我怎么能做文字换行？有没有办法找出字符串是否适合某个宽度？

改变我设置瓷砖的方式会让这更容易吗？我想过让Divs可以点击，但是我仍然不确定如何使文本在中心垂直对齐。我只需指向正确的方向。感谢

编辑：一些代码

瓷砖的html：

<div class="primary col_1 row_1">
    <a href="javascript:expand(1, 1)">
        <?php echo $tile_data[0][0]; ?>
    </a>
</div>

适用的CSS：

#selection_menu a {
    color: #FFFFFF;
    width: 162px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    border: none;
    float: left;
}
#selection_menu .primary_options .primary a { font-size: 23px; height: 108px; }

Answer 1

考虑以下内容（添加适当的颜色和排版）：

#selection_menu div a {
    display: table-cell;
    height: 108px;
    text-align: center;
    vertical-align: middle;
    width: 162px
}

这将在a（div内）的每个#selection_menu中垂直居中，无论它跨越多少行。适用于所有现代Web浏览器。您可以将line-height设置为正确的值，例如1.5（它将定义链接跨越多行时的显示方式）。