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

Question

我想：

1. 居中水平对齐textarea并始终保持居中
2. 将按钮15px放在textarea的右侧并留在那里
3. 将按钮垂直居中于textarea

感谢您的帮助

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

Answer 1

Flexbox（或任何其他通常的非位置居中方法）可以让你关闭，但这将集中组合 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;
}

<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 2

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

<强> 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

Answer 3

添加以下代码

#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 4

鉴于所提供示例中的textarea具有固定的width（300px），您可以通过一些涉及相对定位的技巧来实现这一点，如下所示：

＆＃13;

＆＃13;

*{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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;