input标签怎样才能让文字和框框都居中并对齐

怎么才可以让这几个input标签文字和框框都居中并对齐 用空格太麻烦了

img

最简单的直接套表格，其他内容题主自己加上

img

<!doctype html>
<table border="0" width="680px" align="center" cellpadding="10">
    <tr><td></td><td><h4>青春不常在</h4></td></tr>
    <tr><td align="right" width="100">我的性别：</td><td><input type="radio" name="sex" />男　<input type="radio" name="sex" />女</td></tr>
    <tr><td align="right">我的生日：</td><td><input type="date" /></td></tr>
    <tr><td align="right">所在地区：</td><td><input type="text" /></td></tr>
    <tr><td align="right" valign="top">自我介绍：</td><td><textarea cols="50" rows="8"></textarea></td></tr>
</table>

img

左边固定宽度，右边自适应
父元素 display:flex
左侧子元素 width：200px
右侧子元素，flex:1;

设置 label 宽度，文本框设置宽度

<label class="label">我的性别</label>
.label{width:100px;display:inline-block;text-align:right}
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

可以使用css的弹性布局
div.parent {
/* 启用弹性盒布局 /
display: flex;
/ 使子元素水平居中 */
justify-content: center;
width: 50%;
height: 200px;

    }

    div.child {
        width: 30%;
        height: 100px;
    }