html - 问题在复选框中间居中文本

标签 html css checkbox

我试图将文本置于复选框中间,但文本位于顶部。

我会在这里留下完整的代码

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>
    <style>
        input {
            display: inline-block;
            vertical-align: top;
            padding-left: 25px;
            position: relative;
        }
        
        input {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>

    <input class="w3-check" type="checkbox"><span>text</span></input>
</body>

</html>

如您所见,文本没有居中,我该怎么办?

最佳答案

在这里。

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>
    <style>
        .w3-check,
        .w3-radio {
            vertical-align: top;
            top: unset;
        }
        .w3-check span,
        .w3-radio span {
           vertical-align: middle;
        }
    </style>
</head>

<body>
    <input class="w3-check" type="checkbox"><span>text</span></input>
</body>

</html>

关于html - 问题在复选框中间居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57665443/

相关文章:

javascript - 将 jQuery 导航按钮放在 slider 上

javascript - 使用 Jquery 周围的标签文本查找单选按钮和复选框名称

html - 带有 CSS::before 的自定义复选框 - 在 Firefox/Edge 中不起作用

javascript - 将当前日期作为占位符最初放置在输入字段 datepicker bootstrap 中

javascript - 如何使 Angular 显示为空 <p> 标签?

html - JAWS 不会读取角色为 ="tab"的 li 内链接中的 aria-label 链接

html - Bootstrap nav 交互式标签列表左右

reactjs - 使用 enzyme 模拟 `checked` 后,复选框不是 `change`

javascript - 如何使用切换按钮

javascript - 对用户选择的 HTML 文件使用 DOM 方法