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

【问题标题】：Center a textarea and place a button at its right, vertically centered将文本区域居中并在其右侧放置一个按钮，垂直居中
【发布时间】：2016-05-12 10:30:51
【问题描述】：

我想：

将文本区域水平居中对齐并始终居中
将按钮放置在文本区域右侧 15 像素处并停留在那里
将按钮垂直居中于文本区域

感谢您的帮助

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

小提琴 https://jsfiddle.net/fredericmarcel/wtbweehw/12

【问题讨论】：

标签： html css button textarea

【解决方案1】：

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

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

【讨论】：

不幸的是，我认为你错过了一些东西。 textarea only 应该居中（参见问题的 Pt.1）。然后按钮必须坐在右边。
@Paulie_D 给 textarea 留一个边距...已经完成了，再看演示

【解决方案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 更好地工作。除此以外，无需其他更改。

【讨论】：

不幸的是，我认为你错过了一些东西。 textarea only 应该居中（参见问题的 Pt.1）。然后按钮必须坐在右边。
@Paulie_D。我认为父容器的宽度无关紧要，根据我的解决方案 textarea 将居中，按钮将浮动到其右侧。检查jsfiddle.net/wtbweehw/20
不，您将两个元素居中...不仅仅是文本区域。

【解决方案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>

【讨论】：

【解决方案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);
}

&lt;textarea&gt;&lt;/textarea&gt;&lt;button&gt;button&lt;/button&gt;

【讨论】：