Question

我认为这已经在某处讨论过，但我找不到它:(

因为标题有问题;如何将span置于li内，以为中心，并将底部对齐与跨浏览器css规则（目标是 Android设备中的Webkit浏览器< / em>的）？

的 DEMO at Plunker

Answer 1

使用

li.a span,li.b span,li.c span {
    display:block;
    position:absolute;
    bottom:0;
    margin:0 auto;
}

demo

centered span

Answer 2

这是一个CSS问题，并不是与Android有关的任何东西，你应该发现android上的webkit非常强大（它对我自己的网页浏览没有真正造成任何问题）。

要将某些东西对齐到容器的底部，容器（你的li）必须实现相对或绝对定位，并且是一个块项（display：block;或inline-block虽然有一些问题）。然后跨度需要绝对底部：0;

（请注意，将li更改为块状项目可能会影响布局的其他部分）

对于居中要么让你的跨度填充宽度然后文本对齐中心，使用margin：0 auto; （如果您已将跨度设置为具有设定宽度的块）或使用左右0技巧

Answer 3

补充尼克的答案，我会说，一旦你的<span>绝对定位，你可以将left和right属性设置为0并给它一个固定的宽度将自动在中心对齐。

Answer 4

这有帮助吗？

.page--game-core_bottom .tabs li {
    position: relative; /* Set as a reference point */
}

.page--game-core_bottom .tabs li span{
    /* margin-top: 10px; */
    position: absolute;
    bottom: 0;
    left: 0;       /* These three lines   */
    right: 0;      /* keeps the spans     */
    margin: auto;  /* center horizontally */
}

<强> JSFiddle Demo

如何在列表项内部居中放置跨度

4 个答案: