CSS定位困难

Question

CSS：

.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
} 

HTML：

<table> 
    <tr> 
     <th class= "one">Quantity</th> 
     <th class= "two">Info</th> 
     <th class= "three">Price</th> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity1" value=""/> 
     <td class = "two">Cheap Monday Jeans 30/34 </td> 
     <td class = "three">$39.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity2" value=""/></td> 
     <td class = "two">Herschel Bag (free) </td> 
     <td class = "three">$129.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity3" value=""/></td> 
     <td class = "two">Diesel t-shirt (s) </td> 
     <td class = "three">$59.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity4" value=""/></td> 
     <td class = "two">Superdry Patrol Lite Jacket (m) </td> 
     <td class = "three">$129.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity5" value=""/></td> 
     <td class = "two">I love Canada t-shirt (s) </td> 
     <td class = "three">$19.99 </td> 
    </tr> 
</table> 

我想表行（衣物信息&价格）正下方的表头对齐。意思是，我希望它被集中。我不知道为什么表格行向左倾斜，不能在页眉正下方对齐。

偶试过 td {text-align：center; }，但不起作用。

帮助将不胜感激，谢谢。

Answer 1

的问题是，你想要的东西，左对齐排队对准东西中心的下方。你最好的选择可能是左对齐标题，并使用一些填充来在列之间提供空格。

HTML：

<table> 
<tr> 
    <th class= "one">Quantity</th> 
    <th class= "two">Info</th> 
    <th class= "three">Prices</th> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity1" value=""/></td> 
    <td class = "two">Cheap Monday Jeans 30/34 </td> 
    <td class = "three">$39.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity2" value=""/></td> 
    <td class = "two">Herschel Bag (free) </td> 
    <td class = "three">$129.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity3" value=""/></td> 
    <td class = "two">Diesel t-shirt (s) </td> 
    <td class = "three">$59.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity4" value=""/></td> 
    <td class = "two">Superdry Patrol Lite Jacket (m) </td> 
    <td class = "three">$129.99 </td> 
</tr> 
<tr> 
    <td class = "one"><input type="text" name="quantity5" value=""/></td> 
    <td class = "two">I love Canada t-shirt (s) </td> 
    <td class = "three">$19.99 </td> 
</tr> 
</table> 

和CSS：

.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
} 
th { 
    text-align: left; 
} 
.two, .three { 
    padding-left: 10%; 
} 

例如：http://jsfiddle.net/cpmmk/

Answer 2

左对齐th标头元素。您也可以对齐td元素，但看起来不太漂亮。

th.one { 
    text-align:left; 
} 
th.two { 
    text-align:left; 
} 
th.three { 
    text-align:left; 
} 
.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
} 

Answer 3

你应该做的<th>元素左对齐：

th { 
    text-align:left; 
} 

此外，你应该考虑使用<colgroup>标签，嵌套<col>标签风格你的表列，如这样的：

<table> 
    <colgroup> 
     <col class="one" /> 
     <col class="two" /> 
     <col class="three" /> 
    </colgroup> 
    <tr> 
     <th>Quantity</th> 
     <th>Info</th> 
     <th>Price</th> 
    </tr> 
    <tr> 
     <td><input type="text" name="quantity1" value=""/> 
     <td>Cheap Monday Jeans 30/34 </td> 
     <td>$39.99 </td> 
    </tr> 
    ...rest of the code 

这样，您不必将“class”属性添加到ALLLLL <td> s。

Answer 4

嘿看到这个演示希望它为你工作

link
这些只是你在你的CSS做部分的变化：

.one { 
    width: 1%; 
    text-align:center; 
    } 

.two { 
    width: 10%; 
    text-align:center; 
    } 

.three { 
    width: 10%; 
    text-align:center; 
     } 

，我得到的输出像这：

---

---

我希望这是你想要的。

Answer 5

这就是你想要的吗？DEMO http://jsfiddle.net/yeyene/u7WzM/2/

右对齐，居中。

th.one, td.one { 
    text-align:center; 
} 
th.two { 
    text-align:center; 
} 
td.two { 
    text-align:right; 
    padding-right:5%; 
} 
th.three, td.three { 
    text-align:center; 
} 
.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
} 

Answer 6

将text-align:center;添加到css类。

.one { 
    width: 13%; 
    text-align:center; 
} 

.two { 
    width: 30%; 
    text-align:center; 
} 

.three { 
    width: 30%; 
    text-align:center; 
} 

或者添加

td 
{ 
    text-align:center; 
}