Question

不幸的是，我在试图将“日期”数字与CSS形状对齐时会有点疯狂。我遇到的问题是为了简单起见，我更喜欢“通用”CSS数字格式（日期是显示的变量，类应用于td）。然后我根据其状态更改底层单元格形状的CSS类，以给它一个背景。所有的PHP都可以输出这个东西，但有些数字在单元格的中心位置，其他数字在单元格中太低（中间高度为底部），其中两个在顶部的页面上。

这是我的目标（非常简化，但说明了表格中的对齐问题） - JSFiddle http://jsfiddle.net/xLWCH/

.daynumber  {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; font-weight: bold; position:absolute; display: table-cell; width:20px; vertical-align:middle; top:-9px; text-align: center; vertical-align: middle;}

.halfdaystart {position:relative; border-top: 20px solid green; border-right:20px solid red; font-size:0; line-height:0; width:0;}
.halfdayend   {position:relative; border-top: 20px solid red; border-right:20px solid green; font-size:0; line-height:0; width:0;}
.booked {width:20px; height:20px; background:red;}

.Prohalfdaystart {position:relative; border-top:20px solid green; border-right:20px solid yellow; font-size:0; line-height:0; width:0;}
.Prohalfdayend {position:relative; border-top: 20px solid yellow; border-right:20px solid green;font-size:0; line-height:0; width:0;}
.Profree {width:20px; height:20px; background:yellow;}

.SBhalfdaystart {position:relative; border-top:20px solid red; border-right:20px solid green; width:0; height:0;}
.SBhalfdaystart:before {content: ''; display:block; position:relative; background:lightblue; height:5px; width:20px; top:-20px;}

.SBhalfdayend {position:relative; border-top:20px solid green; border-right:20px solid red; width:0; height:0;}
.SBhalfdayend:before { content: ''; display:block; position:relative; background:lightblue; height:5px; width:20px; top:-20px;}

.free {position:relative; width:20px; height:20px; background:green;}

.SBfree {position:relative; border-top:20px solid green; border-right:20px solid green; width:0; height:0;}
.SBfree:before { content: ''; display:block; position:absolute; background:lightblue; height:5px; width:20px; top:-20px;}


<table width="20" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Halfdaystart
<div class='halfdaystart'> <!-- or other corresponding class above  -->
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=center class="daynumber">1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

最好的方法是什么？它可以用一个尺寸适合所有CSS来完成，还是我必须为文本创建一个单独的类（应用于td），这取决于我想要显示为控制形状的div类？基本上有一种快速简便的方法吗？

将文本定位在不同的CSS形状中

0 个答案: