I think fixing the issues I'm seeing may be more about finding the syntax error rather than finding the right attribute. Here's the first spot of code I'm working with, where the text "Game Title" is not vertically centered, despite having the vertical-align: text-top; attribute applied: <div class="menu">
<div class="mtv gameTitleBackgroundColor section">
<div class="gameTitle section">Game Title</div>
</div>
------------------------------------------------
.sheet-menu {
display: grid;
width: 800px; /*ideal 800*/
height: 97px; /*ideal 600*/
grid-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 39px 39px 19px;
grid-template-areas:
"mtv mtv mtv mtv pla pla nme nme nme nme nme sex sex spc spc spc spc lvl"
"scl scl scl scl ord ord orv eth eth etv age wgt hgt exp exp nlv nlv cpt"
"mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu mnu";
}
.sheet-mtv {
grid-area: mtv;
}
.sheet-gameTitleBackgroundColor {
background-color: #1E90FF;
border: 2px solid #4169E1;
}
.sheet-gameTitle {
font-size: 33px !important;
text-align: center;
vertical-align: text-top;
color: white;
} For both of the vertical alignment questions, I've also tried vertical-align-(baseline, top, middle, bottom, sub, and with !important. Here's the second spot of code I'm working with, where the text <span>in the span</span> is not vertically centered, despite having the vertical-align: text-top; attribute applied: <div class="dm backgroundColor section">
<div class="fieldLabel section">Melee Dmg.</div>
<input name="attr_melee_damage_bonus" type="hidden" value="0">
<span class="field derived" name="attr_melee_damage_bonus"></span>
</div>
-------------------------------------------------
.sheet-coreStats {
display: grid;
width: 450px; /*ideal 800*/
height: 350px; /*ideal 600*/
grid-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"ps ps pss pss pss dm dm dm en en en en mw mw mw psl psl"
"pe pe pes pes pes la la ra ra ra ft ft ft hl hl pel pel"
"ag ag ags ags ags ia ia oa oa oa da da da ap ap agl agl"
"ob ob obs obs obs hd hd sc sc st st in in il il obl obl"
"ms ms mss mss mss cp cp cp mc mc mc mc ls ls ls msl msl"
"me me mes mes mes mr mr mr mr mr ci ci ci ci ci mel mel"
"pr pr prs prs prs lm lm lm ns ns ns ns nf nf nf prl prl"
"mt mt mts mts mts md md md ma ma ma ma ad ad ad mtl mtl"
"mp mp mps mps mps pl pl pl pl pl mm mm mm mm mm mpl mpl";
}
.sheet-dm {
grid-area: dm;
}
.sheet-backgroundColor {
background-color: #4169E1;
}
.sheet-fieldLabel {
font-size: 12px !important;
font:caption;
text-align: center;
color: white;
}
.sheet-field {
border: 1px solid #4169E1;
border-radius: 0px;
margin: 0px 0px;
width: 100% !important;
}
.sheet-derived {
display: inline-block;
font-size: 12px !important;
height: 23px !important;
text-align: center;
vertical-align: text-top;
background-color: white;
} Here's the last spot of code I'm working with, where the text <option>in the select option</option> is not horizontally centered, despite having the text-align: center; attribute applied: <div class="spc backgroundColor section">
<div class="fieldLabel section">Species</div>
<select name="species" class="dropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
-------------------------------------------------------
.sheet-backgroundColor {
background-color: #4169E1;
}
.sheet-fieldLabel {
font-size: 12px !important;
font:caption;
text-align: center;
color: white;
}
.sheet-dropDown {
height: 25px !important;
width: 100% !important;
border: 1px solid #4169E1;
border-radius: 0px;
} I've looked over the web for the answers to these questions. That's why I allow for the possibility that the answer to whether this can be done is no. I just thought that someone else might have found a solution. That said, it's also possible that the reason it's not working is a syntax error.
