我愿意:
- 将文本区域水平居中对齐并始终保持居中
- 将按钮放置在文本区域右侧 15px 处并停留在那里
- 将按钮垂直居中于文本区域
感谢您的帮助
HTML
<p id= "title">Centered title</p>
<form id="myForm" action="" method="post">
<textarea id="name" name="nom"> </textarea>
<button id="end">end</button>
</form>
CSS
#title {
background-color: darkblue;
font-size:40px;
font-weight:bold;
color:white;
margin:0;
padding:2px;
text-align:center;
height:60px;
width:100%x;
}
#myForm {
margin-top:30px;
z-index: -1;
text-align: center;
height:80px;
}
#name {
width: 300px;
height:50px;
font-size: 26px;
line-height:20px;
color:black;
border-style: solid;
border-width: 2.5px;
border-color:black;
padding-left:5px;
padding-top:12px;
}
#end {
font-size:18px;
margin-left:20px;
}
最佳答案
试试这个(仅使用垂直对齐显示):
CSS
#name {
width: 300px;
height: 50px;
font-size: 26px;
line-height: 20px;
color: black;
border-style: solid;
border-width: 2.5px;
border-color: black;
padding-left: 5px;
padding-top: 12px;
display: inline-block;
vertical-align: middle;
margin-left: 80px;
}
#end {
font-size: 18px;
margin-left: 15px;
display: inline-block;
vertical-align: middle;
}
<强> DEMO HERE
关于html - 将文本区域居中并在其右侧放置一个垂直居中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37184290/