Question

正如您在THIS图片中所看到的：我有2个带有text属性的复选框，这里的问题是，由于文本不相等且框居中居中，因此框实际上会移动以保持它在中间。是否有任何方法可以使仅文本移动，并且框保持在THIS之类的静态位置，但不将其与除中间以外的任何内容对齐。 fxml文件中的复选框的片段：

           <JFXCheckBox checkedColor="#8d897d00" focusTraversable="false" graphicTextGap="0.0" prefHeight="35.0" prefWidth="690.0" styleClass="runechanger-check-box" stylesheets="@../stylesheet.css" text="No Away" textFill="#8d897d" unCheckedColor="#8d897d00" GridPane.rowIndex="1">
           <font>
              <Font name="System Bold" size="18.0" />
           </font>
        </JFXCheckBox>

THIS是包含复选框的完整fxml

Answer 1

对齐方式与标签的字体大小和复选框的高度有关。两者必须具有相同的值。更改表格的字体大小会同时给出正确的值。

例如此html

<form>
    <div class="check">
        <label><input type="checkbox"> This checkbox is aligned</label>
    </div>
</form>

文本和复选框与此CSS垂直对齐

form {
    font-size: 16px; /* this value will change font-size and checkbox height */
}
.check {
    margin-bottom: 10px; /* space between form fields */
}
.check label {
    display: block;
    font-size: 1em;
    line-height: 1;
}
.check input {
    width: 1em;
    height: 1em;
    margin:0;
    padding: 0;
    vertical-align: bottom;
}

如何停止复选框使其文本对齐

1 个答案: