时间戳

首页 > 解决方案 > 问题在复选框中间居中文本

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

问题描述

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

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

<!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>

如您所见，文本未居中，我该怎么办？

标签： htmlcsscheckbox

解决方案

这里是。

<!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>

推荐阅读