1

我已经对此进行了一些搜索，这让我发疯了：

  • 我需要使文本“ CENTER & MIDDLE THIS ”居中在textarea底部下方和上方的区域中，如下所示.input：

在此处输入图像描述

代码：http: //jsfiddle.net/qhoc/zqYUJ/2/

现在它似乎是在底部input1和之间的中间对齐input

条件：

  1. 我们知道.input1 input身高是30px
  2. 我宁愿不指定高度，textarea但如果必须，那不太理想，但可以。
  3. .input代码中已经指定了高度和宽度。
  4. 我也不喜欢使用 jQuery。我也不喜欢“硬编码”像素位置，因为稍后，textarea高度可能会由 jQuery 改变，具体取决于其中的文本量。

帮助将不胜感激！！！

4

4 回答 4

2

尝试使用dispaly:table-cell

.input {
    height:300px;
    width: 400px;
    border: 1px solid black; display:table
}
.input1 input {
    width: 100%;
    height: 30px;     
}
.input2 textarea {
    width: 100%;    
}
.input3 {
    width: 100%;
    height:100%; display:table-row;
    text-align:center;     
}
.input3 div {
    display:table-cell; 
    vertical-align:middle;
    margin:auto 0
}

演示

于 2013-01-25T09:15:01.437 回答
1

检查你更新的小提琴：只需设置left和top 小提琴

于 2013-01-25T09:06:41.267 回答
0

在您的情况下，它应该是：

top: 50%;
left:27%;

http://jsfiddle.net/zqYUJ/43/embedded/result/

于 2013-01-25T09:17:17.467 回答
0

只需像这样更改您的“.input3 div”样式。它可能会有所帮助...

  .input3 div {
     text-align: center;
     background: red;
     top: 50%;
     margin: 80px;
 }
于 2013-01-25T09:06:29.207 回答