Question

我正在努力提高对CSS的理解。

我有以下HTML表格：

<div class="app-pages validate-email-page" id="containerbg2">

        <div>
            <form action="<?php echo site_url("/validation-control");?>" method="post" id="dataForm">
                <table border='1' class="email-table">
                    <tr>
                        <th>First Name</th>
                        <th>Surname</th>
                        <th>Email</th>
                        <th>Sign Up Date</th>
                        <th>Expiration Date</th>
                        <th>Roll back user?</th>
                        <th>Repeat Validation?</th>
                    </tr>
                    <?php
                        $wcl_ci_api->get_page_view_verification_emails();
                    ?>

                </table>
                <input type="submit" value="Confirm">
            </form>
        </div>

    </div>
</div>

我有以下CSS：

div.validate-email-page table {
    text-align: left;   
}

据我所知，上面的CSS：

这是说任何表格＆＃39;在一个＆＃39;内使用＆＃39;类验证电子邮件页面＆＃39;

将CSS样式应用于它，例如，所有文本都将左对齐。

接下来，如果我想将特定样式应用于表格的某些部分，例如我可以执行以下操作：

div.validate-email-page table th{
    text-align: left;   
}

div.validate-email-page table tr{
    text-align: center; 
}

这两个人说：

div中表格中所有行（标题）的中心文字（左侧文字），其中包含＆＃39; validate-email-page＆＃39;

这一切似乎都运转正常。

我的问题是，我只希望将复选框放在中心位置，这些复选框是由php制作的，并且具有类＆＃39; checkradio＆＃39;并键入＆＃39;复选框＆＃39;，但到目前为止，我的所有尝试都失败了。

我尝试了很多不同的变体，但似乎无法正确使用它，例如：

div.validate-email-page table input checkbox{
    text-align: Center;
}

我知道我不是太远但是我无法解决这个问题似乎无法找到问题的明确答案

最好我想按列名称设置样式，这样我就可以根据列名更改每列的样式。

Answer 1

input checkbox会匹配<input> <checkbox> </input>，这不是HTML中可以包含的内容。

如果您选中了复选框，那么text-align: center将无法正常工作，因为复选框中没有文字可以居中。

如果要将复选框居中，则需要选择其中的块元素，然后将text-align应用于该元素。

CSS doesn't have a parent selector，因此您无法使用复选框来定位其父级并选择它。

You can't align content based on the column。

将适当的表格单元格（<td>元素）添加到类中并使用类选择器。

Answer 2

是的，你很亲密。：）

div.validate-email-page table input.checkradio{
    text-align: center;
}

这将应用于表中的checkradio类的输入，在带有validate-email-page类的div中。 ;）

编辑：

或者您可以尝试使用属性选择器：

div.validate-email-page table input[type="checkbox"] {
    text-align: center;
}

CSS造型，造型儿童

2 个答案: