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

Question

我愿意 :

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

谢谢您的帮助

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

<p id= "title">Centered title</p> 
<form  id="myForm" action="" method="post">
<textarea id="name"  name="nom"> </textarea>
<button id="end">end</button>           
</form>

Answer 1

试试这个（只需使用垂直对齐显示）：

#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;
  display: inline-block;
  vertical-align: middle;
  margin-left: 80px;
}

#end {
  font-size: 18px;
  margin-left: 15px;
  display: inline-block;
  vertical-align: middle;
}

<p id="title">Centered title</p>


<form id="myForm" action="" method="post">
  <textarea id="name" name="nom" placeholder="name" autofocus></textarea>
  <button id="end" type="button" class="btn btn-success btn-md">end</button>
</form>

Answer 2

添加以下代码

#myForm {
margin-top: 30px;
z-index: -1;
text-align: center;
height: 80px;
display: -ms-flex;
-ms-align-items: center;
-ms-justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}

注意：这在 ie10 以上的系统上可以正常工作。除此之外不需要其他改变。

Answer 3

Flexbox（或任何其他常用的非位置居中方法）可以让您接近，但这将使 combined 文本区域/按钮居中。

显示问题的演示...

#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;
}
#myForm {
  display: flex;
  justify-content: center;
  align-items: center;
}

<p id="title">Centered title</p>


<form id="myForm" action="" method="post">
  <textarea id="name" name="nom" placeholder="name" autofocus></textarea>
  <button id="end" type="button" class="btn btn-success btn-md">end</button>
</form>

不幸的是，要将

textarea

居中并使按钮位于右侧，我们需要使用绝对定位。

#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;
}
#myForm {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#end {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  left: calc(50%+150px);
}

<p id="title">Centered title</p>


<form id="myForm" action="" method="post">
  <textarea id="name" name="nom" placeholder="name" autofocus></textarea>
  <button id="end" type="button" class="btn btn-success btn-md">end</button>
</form>

Answer 4

鉴于所提供示例中的

textarea

具有固定的

width

（300px），您可以通过一些涉及相对定位的技巧来实现这一点，如下所示：

*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
textarea,button{
  display:inline-block;
  margin:20px 0;
  position:relative;
  vertical-align:middle;
}
textarea{
  left:calc(50% - 150px);
  width:300px;
}
button{
  left:calc(50% - 135px);
}

<textarea></textarea><button>button</button>