CSS 在固定高度的输入框中垂直对齐文本，而不使用display: table或padding

在本文中，我们将介绍如何在固定高度的输入框中垂直对齐文本，而不使用display: table或padding。

阅读更多：CSS 教程

方法一：使用display: flex和align-items属性

<style>
    .input-container {
        display: flex;
        align-items: center;
        height: 40px;
        border: 1px solid #ccc;
        padding: 5px;
    }

    .input-container input {
        flex: 1;
        border: none;
        outline: none;
    }
</style>

<div class="input-container">
    <input type="text" placeholder="垂直对齐的输入框">
</div>

通过将输入框的容器设置为display: flex，并使用align-items属性设置垂直对齐方式为居中，我们可以轻松实现在固定高度的输入框中垂直对齐文本。

方法二：使用line-height属性

<style>
    .input-container {
        height: 40px;
        border: 1px solid #ccc;
        padding: 5px;
        line-height: 40px;
    }

    .input-container input {
        border: none;
        outline: none;
    }
</style>

<div class="input-container">
    <input type="text" placeholder="垂直对齐的输入框">
</div>

通过调整输入框的容器的line-height属性值为容器的高度，我们也可以实现在固定高度的输入框中垂直对齐文本的效果。

方法三：使用vertical-align属性

<style>
    .input-container {
        display: inline-block;
        height: 40px;
        border: 1px solid #ccc;
        padding: 5px;
    }

    .input-container input {
        border: none;
        outline: none;
        vertical-align: middle;
    }
</style>

<div class="input-container">
    <input type="text" placeholder="垂直对齐的输入框">
</div>

将输入框设置为display: inline-block，并使用vertical-align属性设置垂直对齐方式为middle，同样可以实现在固定高度的输入框中垂直对齐文本。

方法四：使用table-cell布局

<style>
    .input-container {
        display: table-cell;
        vertical-align: middle;
        height: 40px;
        border: 1px solid #ccc;
        padding: 5px;
    }

    .input-container input {
        border: none;
        outline: none;
    }
</style>

<div class="input-container">
    <input type="text" placeholder="垂直对齐的输入框">
</div>

将输入框的容器设置为display: table-cell，并使用vertical-align属性设置垂直对齐方式为middle，也可以实现在固定高度的输入框中垂直对齐文本的效果。虽然这种方法使用了display: table属性，但没有使用display: table-row和display: table-cell等其他表格相关的属性。

方法五：使用position属性和transform属性

<style>
    .input-container {
        position: relative;
        height: 40px;
        border: 1px solid #ccc;
        padding: 5px;
    }

    .input-container input {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        outline: none;
    }
</style>

<div class="input-container">
    <input type="text" placeholder="垂直对齐的输入框">
</div>

通过将输入框的容器设置为position: relative，并将输入框设置为position: absolute，并使用top和transform属性进行定位和偏移，也可以实现在固定高度的输入框中垂直对齐文本的效果。

总结

在本文中，我们介绍了五种方法可以实现在固定高度的输入框中垂直对齐文本。这些方法分别是使用display: flex和align-items属性、使用line-height属性、使用vertical-align属性、使用table-cell布局以及使用position属性和transform属性。根据实际需求，选择适合的方法来实现输入框中的垂直对齐效果。