下面有以下代码片段,可根据需要垂直对齐 TextArea。
如何在代码中的某个位置添加一个类,将文本区域与页面顶部对齐,而不是当前垂直对齐的中心位置?我需要顶部对齐或居中对齐,这就是为什么我要求一个可以添加的类来更改文本区域位置。
html,body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
form.ui.form.full-screen {
flex: 1 1;
display: flex;
min-height: 0;
}
form.ui.form.full-screen .textAreaClickCapturer {
display: flex;
flex: 1 1;
min-height: 0;
}
form.ui.form.full-screen textarea {
border: none;
border-radius: 0;
font-Size: 21px;
line-height: 28px;
padding: 24px;
width: 100%;
text-align: left;
overflow: auto;
margin: auto;
outline: 0;
resize: none;
box-sizing: border-box;
background: red;
}
<form action="" class="ui small form full-screen">
<div class="textAreaClickCapturer">
<textarea placeholder="Hi..." style="height: 132px;"></textarea>
</div>
</form>
最佳答案
您所需要的只是align-self:flex-start;
html,body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
form.ui.form.full-screen {
flex: 1 1;
display: flex;
min-height: 0;
}
form.ui.form.full-screen .textAreaClickCapturer {
display: flex;
flex: 1 1;
min-height: 0;
align-self:flex-start;
}
form.ui.form.full-screen textarea {
border: none;
border-radius: 0;
font-Size: 21px;
line-height: 28px;
padding: 24px;
width: 100%;
text-align: left;
overflow: auto;
margin: auto;
outline: 0;
resize: none;
box-sizing: border-box;
background: red;
}
<form action="" class="ui small form full-screen">
<div class="textAreaClickCapturer">
<textarea placeholder="Hi..." style="height: 132px;"></textarea>
</div>
</form>
关于html - 如何添加一个将 TextArea 移动到页面顶部的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48697250/