html - 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

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

有用链接
这些是你必须在你的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

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

Answer 5

你应该让<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 6

那是你要的吗？演示http://jsfiddle.net/yyene/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%;
}