html - 居中文本区域并在其右侧放置一个按钮，垂直居中

Question

我愿意:

1. 水平居中对齐文本区域并始终居中
2. 将按钮放在文本区域右侧 15px 处并留在那里
3. 将按钮垂直居中到文本区域

谢谢你的帮助

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;  
   }

fiddle https://jsfiddle.net/fredericmarcel/wtbweehw/12

Answer 1

试试这个(只使用 vertical-align with display):

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