如何使文本区域内的文本居中?
How to center text within a text area?
.username::placeholder {
padding-top: 14px;
text-align: center;
vertical-align: middle;
color: $grey-blue;
overflow: hidden;
}
.username {
resize: none;
width: 250px;
height: 46px;
text-align: center;
vertical-align: middle;
font-size: 16px;
font-family: "SansSerif", sans-serif;
display: inline-block;
border: 2px solid $blue;
}
.submit
{
vertical-align : middle;
background-color : $blue;
color : $white;
border : 2px solid $blue;
text-align : center;
padding : 16px 32px;
text-decoration : none;
display : inline-block;
font-size : 16px;
margin : 4px 2px;
cursor : pointer;
}
<form class="center">
<textarea minlength="2" maxlength="24" title="Username" placeholder="Username" class="username"></textarea >
<button type="submit" class="submit">Submit</button>
</form>
我想将文本字段中的一些文本垂直居中,我能够使占位符文本居中,但不能使正在键入的实际文本居中。
我希望通过伸出手来完成的是让用户的文本与占位符文本以及旁边的 "submit" 按钮对齐。
如果您 运行 上面的代码片段,并尝试在字段中输入文本,您就会明白我的意思。
我尝试过的一个解决方案是将 div 包装起来,但没有用。
这是我的 HTML:
http://secure.serverbox.net/sharex/201803/2018-03-28_15-07-02.png
这是我的造型:
http://secure.serverbox.net/sharex/201803/2018-03-28_15-08-19.png
问题如下:
有占位符: http://secure.serverbox.net/sharex/201803/2018-03-28_15-09-25.png
VS
带文字: http://secure.serverbox.net/sharex/201803/2018-03-28_15-11-52.png
请注意占位符文本的垂直对齐方式与用户输入的方式有何不同。
提前致谢!
看起来正在键入的实际文本已经居中。也许你在谈论垂直对齐?您将 padding-top 添加到占位符,为什么 .username 不一样?我建议你删除 .username::placeholder 并且只使用 .username (这次不要忘记添加 padding top)。希望对您有所帮助:)
.username::placeholder {
padding-top: 14px;
text-align: center;
vertical-align: middle;
color: $grey-blue;
overflow: hidden;
}
.username {
resize: none;
width: 250px;
height: 46px;
text-align: center;
vertical-align: middle;
font-size: 16px;
font-family: "SansSerif", sans-serif;
display: inline-block;
border: 2px solid $blue;
}
.submit
{
vertical-align : middle;
background-color : $blue;
color : $white;
border : 2px solid $blue;
text-align : center;
padding : 16px 32px;
text-decoration : none;
display : inline-block;
font-size : 16px;
margin : 4px 2px;
cursor : pointer;
}
<form class="center">
<textarea minlength="2" maxlength="24" title="Username" placeholder="Username" class="username"></textarea >
<button type="submit" class="submit">Submit</button>
</form>
我想将文本字段中的一些文本垂直居中,我能够使占位符文本居中,但不能使正在键入的实际文本居中。
我希望通过伸出手来完成的是让用户的文本与占位符文本以及旁边的 "submit" 按钮对齐。
如果您 运行 上面的代码片段,并尝试在字段中输入文本,您就会明白我的意思。
我尝试过的一个解决方案是将 div 包装起来,但没有用。
这是我的 HTML: http://secure.serverbox.net/sharex/201803/2018-03-28_15-07-02.png
这是我的造型: http://secure.serverbox.net/sharex/201803/2018-03-28_15-08-19.png
问题如下:
有占位符: http://secure.serverbox.net/sharex/201803/2018-03-28_15-09-25.png
VS
带文字: http://secure.serverbox.net/sharex/201803/2018-03-28_15-11-52.png
请注意占位符文本的垂直对齐方式与用户输入的方式有何不同。
提前致谢!
看起来正在键入的实际文本已经居中。也许你在谈论垂直对齐?您将 padding-top 添加到占位符,为什么 .username 不一样?我建议你删除 .username::placeholder 并且只使用 .username (这次不要忘记添加 padding top)。希望对您有所帮助:)