Question

我有一个div缠绕了几个span并使用JS来使跨度淡入淡出（用于推荐）。一切正常，但我无法将span文本置于div的中心位置。这是相关的代码：

HTML -

<div class="slideshow">
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

这是幻灯片CSS -

.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
}

谁能告诉我我做错了什么？哦，是的，我试过text-align:center;但没有运气。

[编辑]我想补充一下，我也尝试添加!important而不做任何更改。

Answer 1

我测试了你的代码并添加了

.slideshow {
    text-align: center; 
}

，文字中心就好了。

也许你在其他地方有一个拼写错误或css定义会覆盖你的文本对齐？

修改

我做了一个小提琴的“检查元素”，这里是我得到的CSS定义：

<div class="slideshow" style="position: relative; "> <span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; z-index: 3; top: 0px; left: 0px; display: block; width: 13px; height: 15px; opacity: 0.275808; ">Hi</span> <span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; top: 0px; left: 0px; display: block; width: 52px; height: 15px; z-index: 2; opacity: 0.724192; ">Goodbye</span> </div> element.style { color: #333; display: block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; font-size: 12px; height: 15px; left: 0px; opacity: 1; position: absolute; top: 0px; width: 52px; z-index: 3; }

我会说“display：block”是你的问题。

Answer 2

您需要将text-align: center应用于包含<div>的内容，而不是执行任何导致<span>呈现为块的内容（例如float ）。绝对定位也会将元素拉出正常流量，因此它们不会受文本对齐的影响。

更新：现在提供了一个工作示例，我们可以看到发生了什么。 span元素由插件绝对定位：

$slides.css({position: 'absolute', top:0, left:0}).hide()

看起来您需要重新考虑插件正在使用的布局逻辑。

无法将文字转到中心？

2 个答案: