Centering Checkbox and Clickable Text.

Hello Team,

I'm trying to make a custom sheet for my own system, but I have completely 0 skills in HTML and CSS so I'm learning as I go.

Here are 2 things that I can't really find answers for online.

1) How do I center this god damn checkbox in "Known" column.

2) How do you make a clickable text. I want it to work like in 5e sheet where you can click "Arcana" and make a roll, instead of a separate button and also highlight on hover. As you can see there is a "transparent" button there already, I can add text there even, but the "roll" icon is always present.

Here is my HTML

<div class="sheet-section-title-bar sheet-text-align-center">Academic Skills</div>
							
	<table class="sheet-subsection-table">
	<tr>
	<!-- header row -->
	<th>Known</th>
	<th>Skill Name</th>
	<th>Prof.</th>
	<th>Bonus</th>
	<th>Total</th>
</tr>
<tr>
<!-- start of row -->
	<td>
	    <input type="checkbox" name="attr_arcana_prof" value="@{prof}" />
	</td><td style="vertical-align:middle;">
	    <div class="sheet-big-bold-saving-throw">Arcana</div>
        </td><td style="vertical-align:middle;">
            <input type="checkbox" name="attr_arcana_prof" value="@{prof}" />
        </td><td style="vertical-align:middle;">
            <input class="sheet-numbox" type="number" name="attr_arcana_base" min="-5" step="1" value="-3" />
        </td><td style="vertical-align:middle;">
            <input class="sheet-numbox" type="number" name="attr_arcana_bonus" value="@{arcana_base}+@{arcana_prof}" disabled="disabled"/>
        </td><td style="vertical-align:middle; border: none;">
             <button class="sheet-roll-button" type="roll" value="&{template:check} {{name=Arcana}} {{check=[[1d20 + @{arcana_bonus}]]}} {{checkadv=[[1d20 + @{arcana_bonus}]]}}" /></button>
                </td>
                <tr>
               </tr>
    <!-- end of row -->
    </tr>
</table>

I will skip over the CSS since I bet you don't need it here.

Thanks in advance!

1) text-aglin:center in the container i.e. the td 

2) https://app.roll20.net/forum/post/9087540/make-text-act-as-buttons-custom-character-sheet/?pageforid=9087540#post-9087540

The 2 check boxes have the same attribute name. 

David said:

1) text-aglin:center in the container i.e. the td 

2) https://app.roll20.net/forum/post/9087540/make-text-act-as-buttons-custom-character-sheet/?pageforid=9087540#post-9087540

The 2 check boxes have the same attribute name. 

text-aglin:center that explains a lot. I was doing text-aglin: center  (with space). Thats why it was not working.

Absolutely amazing! Thanks a lot!

I feel stupid asking about it but, how do I align center all saving throws names? Should I contain buttons in their own divboxes and to class for them?

<td>
        <button class="sheet-roll sheet-big-bold-button" type="roll" value="&{template:check} {{name=Fortitude Saving Throw}} {{check=[[1d20 + @{fortitude_bonus}]]}} {{checkadv=[[1d20 + @{fortitude_bonus}]]}}" />Fortitude</button>
    </td><td style="vertical-align:middle;">
        <input type="checkbox" name="attr_fortitude_prof" value="@{prof}" />
    </td><td style="vertical-align:middle;">
        <input class="sheet-numbox" type="number" name="attr_fortitude_base" min="-5" step="1" value="-5" />
       </td><td style="vertical-align:middle;">
    <input class="sheet-numbox" type="number" name="attr_fortitude_bonus" value="@{fortitude_base}+@{fortitude_prof}+@{constitution}" disabled="disabled"/>
</td>

button[type=roll].sheet-roll::before {
	content: ' ';
}
button[type="roll"].sheet-big-bold-button {
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	background: none;
	border-style: none;
	
}
button[type="roll"].sheet-roll:hover{
    color: red;
}

I would counsel against center-aligning the saving throw names for accessibility reasons. I'd instead add a little padding to the heading blocks (saving throw, prof, bonus, total) of .2 em to make them read as separate words instead of one long blur of text. 

Oh yeah, I've already added some padding there, but I dont understand why I shouldn't center-align names?

Wastel said:

Oh yeah, I've already added some padding there, but I dont understand why I shouldn't center-align names?

Because the names will be of different lengths (more than likely), it makes it harder to read. You can certainly do it, though...