CSS表单输入元素不居中

在本文中，我们将介绍如何使用CSS来居中显示表单输入元素。

阅读更多：CSS 教程

居中文本输入框

要居中显示文本输入框，我们可以使用CSS的flexbox布局属性。首先，我们需要创建一个包含文本输入框的容器元素。然后，将容器元素的display属性设置为”flex”，并使用justify-content和align-items属性将其内容居中。

下面是一个示例代码：

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
    }
</style>

<div class="container">
    <input type="text" placeholder="请输入内容">
</div>

在上面的代码中，我们创建了一个高度为100px的容器元素，并将其中的文本输入框居中显示。你可以根据需要调整容器元素的高度和宽度。

居中单选框和复选框

要居中显示单选框和复选框，我们可以使用CSS的text-align属性。首先，我们需要将包含单选框和复选框的容器元素的text-align属性设置为”center”。

下面是一个示例代码：

<style>
    .container {
        text-align: center;
    }
</style>

<div class="container">
    <input type="radio" id="option1" name="options" value="1">
    <label for="option1">选项1</label>
    <br>
    <input type="radio" id="option2" name="options" value="2">
    <label for="option2">选项2</label>
    <br>
    <input type="checkbox" id="option3" name="options" value="3">
    <label for="option3">选项3</label>
    <br>
    <input type="checkbox" id="option4" name="options" value="4">
    <label for="option4">选项4</label>
</div>

在上面的代码中，我们创建了一个容器元素，并将其中的单选框和复选框居中显示。

居中下拉菜单

要居中显示下拉菜单，我们可以使用CSS的margin属性。首先，我们需要将下拉菜单设为块级元素，并将其左右两侧的外边距设置为”auto”。

下面是一个示例代码：

<style>
    select {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>

在上面的代码中，我们创建了一个下拉菜单，并将其居中显示。