我正在尝试垂直对齐文本区域(文本框)中的占位符文本。我使用文本区域而不是文本输入,因为我需要使用多行。
.textbox1 {
width: 440px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>
发布于 2016-03-24 13:34:32
这适用于最新的Firefox,IE/Edge,Chrome的纯CSS:
textarea {
width: 440px;
height:600px; /* Note this is the same height as the placeholders line-height */
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
line-height:600px;
}
:-ms-input-placeholder { /* IE */
line-height:600px;
}
请参阅此fiddle。关键是将文本区域的height
设置为与占位符相同的line-height
。
遗憾的是,vertical-align: middle;
似乎还没有得到支持。
发布于 2016-03-24 13:25:33
您最好的选择是使用padding
,因为line height
不能在多条线路上工作。
此外,在计算填充时,请确保将行高/字体大小考虑在内。
发布于 2020-08-22 21:58:37
.textbox1 {
width: 440px;
height:70px
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
line-height:70px;
text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
line-height:70px;
text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
line-height:70px;
text-align: center;
}
:-ms-input-placeholder { /* IE 10+ */
line-height:70px;
text-align: center;
}
你可以在这里查看CSS jsfiddle
https://stackoverflow.com/questions/36193459
复制相似问题