CSS Укладка, укладка детей

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:

Он говорит, что любой " table 'в' div 'с' class validate-email-страница '

Будет иметь стили CSS ng применяется к нему, например, весь текст будет выровнен влево.

Далее, если я хочу, чтобы применить конкретные стили к части таблицы, например, головы, я могу сделать следующее:

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

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

И эти 2 говорит:

Центр текст (текст слева) для всех строки (заголовки) в таблице в div с классом «validate-email-page»

Все это, кажется, работает нормально.

Моя проблема в том, что я хочу только центрировать флажки, которые создаются php, и иметь класс «checkradio» и тип «checkbox», но до сих пор все мои попытки потерпели неудачу.

Я пробовал много разных вариантов, но не могу показаться, чтобы получить это право, например:

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 класса, в таблице, в DIV с классом Validate-электронной-страницы. ;)

Edit:

Или вы можете попробовать селектор атрибута:

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