如何让页面中的输入框与图片居中对齐（CSS新手求助）

嘿，刚学CSS就碰到布局难题太正常啦！我来给你分享一个简单又实用的方案，用Flexbox就能轻松实现你要的效果——把带钥匙/锁图标的用户名、密码输入框整体居中在页面里。

先给你一个完整的可运行代码示例，你直接复制就能看到效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带图标输入框居中示例</title>
    <style>
        /* 重置默认样式，避免浏览器自带margin/padding干扰布局 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 让body占满整个视口，用Flexbox实现全局居中 */
        body {
            min-height: 100vh;
            display: flex;
            justify-content: center; /* 水平方向居中 */
            align-items: center; /* 垂直方向居中 */
            background-color: #f5f5f5;
        }

        /* 输入组容器：组合图标与输入框 */
        .input-group {
            display: flex;
            align-items: center; /* 让图标和输入框垂直居中对齐 */
            gap: 10px; /* 图标与输入框的间距 */
            background-color: white;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            margin-bottom: 16px; /* 两个输入组之间的垂直距离 */
        }

        /* 统一图标尺寸 */
        .input-group img {
            width: 20px;
            height: 20px;
        }

        /* 美化输入框 */
        .input-group input {
            border: none;
            outline: none;
            font-size: 14px;
            padding: 4px 0;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="login-form">
        <div class="input-group">
            <img src="钥匙图标的本地路径/URL" alt="用户名图标">
            <input type="text" placeholder="请输入用户名">
        </div>
        <div class="input-group">
            <img src="锁图标的本地路径/URL" alt="密码图标">
            <input type="password" placeholder="请输入密码">
        </div>
    </div>
</body>
</html>

关键布局逻辑拆解： #

• 全局居中：给body设置min-height:100vh让它占满整个浏览器窗口，再通过display:flex + justify-content:center + align-items:center，直接让内部的登录表单容器在页面水平、垂直方向都居中。
• 图标与输入框组合：每个.input-group用display:flex布局，让图标和输入框在同一行排列，align-items:center保证它们垂直方向对齐，gap属性可以快速调整两者的间距。
• 样式优化：重置默认样式避免浏览器差异，给输入组加背景和边框让视觉更统一，输入框去掉边框和轮廓让整体更整洁。

如果你想调整样式细节，比如修改间距、圆角、颜色，直接改CSS里对应的数值就行，非常灵活～

内容的提问来源于stack exchange，提问作者oneWhisper