如何停止复选框与其文本对齐答案

【问题标题】：How to stop check boxes aligning to their text如何停止复选框与其文本对齐
【发布时间】：2019-12-05 18:49:01
【问题描述】：

正如您在THIS 图片中看到的那样：我有 2 个带有文本属性的复选框，这里的问题是由于文本不相等并且框居中到中间，框实际上会移动以将其保留在中间。有什么方法可以使只有文本移动，并且框保持在像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

【问题讨论】：

请提供一个 minimal reproducible example 来证明问题（包括完整的 fxml - here 而不是其他地方）。再加上澄清你所追求的 - 框左对齐和文本居中，比如有两列，第一列包含框，第二列包含居中文本？你可以提供一张你想要的潦草图片，而不是你不想要的截图:)
我确实添加了我想要的截图和问题的 sn-p 以及完全可重现的 fxml。也许阅读帖子？

标签： java css javafx checkbox

【解决方案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;
}

【讨论】：

问题是关于 javafx，而不是 html :)