html - 在 div 中居中对齐锚文本

Question

我搜索了这个，但没有找到解决方案。我有一个带有文本的锚。

锚点的高度和宽度由 JS 在 DOM 加载时设置我需要锚点内的文本垂直和水平居中。

遵循了许多关于居中元素的教程。他们都没有工作。

这是我的html

<a href="#" class="wpsc_category_grid_item" title="Category1">
    <span>Category1</span>
</a>

还有我的 CSS

.wpsc_category_grid_item {
    background: #000;
    margin:1px;
    float:left;
    text-align: center;
    display:table;
}

.wpsc_category_grid_item span{
    display: table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
    color:#fff;
    text-align: center;
    font-weight: bold;
    text-decoration: none; 
}

我需要这些文本，也需要垂直居中..

Answer 1

我用你的代码做了一个js小提琴。我添加后它起作用了

width: 100%;
height:100%;

到.wpsc_category_grid_item