I'm using HTML <label> elements for all my non-dynamic character sheet labels. With the below CSS, I can't seem to get them vertical-align: middle - they are top-aligned everywhere on my sheet. Minor, but annoying. I've included a sample of the surrounding HTML layout, which uses CSS grid. (Note: I've tried using grid's align-self: center but no impact. <div class="sheet-overview">
<div class="grid-main">
<div class="grid-sub2">
<label>Player:</label> <input type="text" name="attr_player" />
<label>Name:</label> <input type="text" name="attr_character_name" />
<label>Gender:</label> <input type="text" name="attr_gender" />
<label>Class:</label> <input type="text" name="attr_class" />
<label>Title:</label> <input type="text" name="attr_title" />
<label>Alignment:</label>
<select name="attr_alignment">
<option value="law">Law</option>
<option value="neutrality">Neutrality</option>
<option value="chaos">Chaos</option>
</select>
</div>
</div>
</div> .sheet-grid-main {
display: grid;
grid-template-columns: 50% 50%;
row-gap: 10px;
}
.sheet-grid-sub2 {
display: grid;
grid-template-columns: 33.3% 66.6%;
}
.sheet-grid-sub2 > .sheet-grid-title {
grid-column: span 2;
justify-self: start;
}
.sheet label {
display: inline;
font-size: 1em;
font-weight: normal;
}
