左对齐自定义复选框和Div中心文本（输入+ Div）

Question

提前感谢您的帮助。

所以我有自定义复选框输入。单击标签或输入时，div的边框和标签文本会更改颜色，并显示检查。

唯一的问题是，我需要检查左对齐，而文本保持居中，无论复选框状态如何（当前选中复选框时，标签跳转到右侧）。知道如何让左边的复选框保持文本居中，并保持静止吗？

这是我的代码：

CSS：

div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased; 
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}

label {
display:inline;
text-align:center;
}

input[type=checkbox] {
display: none;
}

input:checked + div {
border: solid 1px red;
color: #F00;
}

input:checked + div:before {
content: "\2713";
}

HTML：

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label><br>
</div> 

Answer 1

为输入添加绝对位置：选中+ div：之前......像这样：

input:checked + div:before {
content: "\2713";
position: absolute;
margin-left: -50px;
}