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

左对齐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 2

嘿，看到这个演示希望它对你有用

link
这些是您在 CSS 部分中唯一需要做的更改：

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

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

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

我得到的输出是这样的：

<小时/>

---

我希望这就是你想要的。

Answer 3

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

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 4

你应该让<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”属性添加到<td>的ALLLLL。

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;
}