0

这段代码生成了一个序列：块，文本，块，文本，块，文本，它看起来差不多，除了我不能让文本在 div 的中心垂直对齐，所以它看起来像它旁边对齐盒子的中心垂直。有什么建议吗？



    <div style="position: absolute; right: 0; top: 0; text-align: right;">
    <span style="display: inline-block; width: 15px; height: 15px; background: #2880BB"></span>                                     
    <span style="display: inline-block">Created   </span>                                            
    <span style="display: inline-block; width: 15px; height: 15px; background: #7FC31B"></span>
    <span style="margin-left: 5px;">Won   </span>
    <span style="display: inline-block; width: 15px; height: 15px; background: #FD2A2F"></span>
    <span style="margin-left: 5px;">Lost </span>
    </div>
4

7 回答 7

1

替代解决方案：

<div style="position: absolute; right: 0; top: 0; text-align: right;">
    <span style="border-left: 15px solid #2880BB; padding-left: 5px;">Created</span>                                            

    <span style="border-left: 15px solid #7FC31B; margin-left: 5px; padding-left: 5px">Won</span>

    <span style="border-left: 15px solid #FD2A2F; margin-left: 5px; padding-left: 5px">Lost</span>
</div>​

jsFiddle：http: //jsfiddle.net/w2wVc/1/

于 2012-09-05T17:47:49.657 回答
0

我在你的 CSS 中使用了 position:relative 和 top:2px 。根据需要更改顶部像素值。

<div style="position: absolute; right: 0; top: 0; text-align: right;">
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #2880BB"></span>                                     
<span style="display: inline-block">Created   </span>                                            
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #7FC31B"></span>
<span style="margin-left: 5px;">Won   </span>
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #FD2A2F"></span>
<span style="margin-left: 5px;">Lost </span>
</div>
于 2012-09-05T17:49:50.677 回答
0

我将 div 设置为display:table，将 spans 设置为display:table-cell，所以现在您可以vertical-align在表格模式下进行设置。

http://jsfiddle.net/w2wVc/10/

于 2012-09-06T03:28:46.553 回答
0

您可以尝试对文本使用-ve边距。这是一个现场演示。

于 2012-09-05T17:52:39.853 回答
0

我的建议是把每一个<span>和它的盒子放在一个div然后明确的权利div

clear: right
于 2012-09-05T17:54:27.683 回答
0

line-height您可以使用垂直居中文本而不是高度。看看这段代码：

HTML：

<div class="vertical">
    Hello
</div>

CSS：

.vertical {line-height: 50px; border: 1px solid #f00;}

小提琴：http: //jsfiddle.net/rv8pq/

于 2012-09-05T17:33:14.807 回答
0

我已经用 CSS 尝试了很多次，但从来没有运气（有良好的跨浏览器支持）。我能够让它与一些 Jquery 一起工作。

http://jsfiddle.net/EebmV/1/

你们可以去老学校，用一张桌子。表格单元格始终用于垂直对齐。

更新：

使用正确引用的 Jquery 库重新保存。

于 2012-09-05T17:57:40.573 回答