Question

我试图在textarea元素中垂直居中多行文本。

我在contenteditable="true"上使用了属性div，然后将textarea元素嵌入到这些div中。通过将div的css属性设置为：

div {
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}

这适用于单行textarea。但是我的目标是有多行文本，当我按下返回键入下一行时，它现在将消失在div的边界之外。我已经尝试为div和textarea设置overflow: visible !important，但这只会将textarea扩展到大约4行而不是更多。该解决方案的另一个问题是，如果我的textarea只有几行，它们不再垂直居中。

如何在文本区域中垂直居中多行文字并使其可见？我正在寻找最简单的解决方案。

＆＃13;

$('td div').prop("readonly", true);
$('td div').attr("contenteditable", false);

＆＃13;

* {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

td {
  height: 150px;
  width: 150px;
  padding: 5px;
}

td div {
/*overflow: visible; !important*/
  height: 100%;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
  outline: none;
  border-color: red;
}

textarea {
/* overflow: visible; !important */
   width: 100%;
   height: 100%;
   outline: none;
   cursor: default;
   vertical-align: middle;
   text-align: center;
   resize: none;
   border-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
          <thead>
            <tr class="days-of-the-week">
              <th scope="col" class="time-col"></th>
              <th scope="col">Sunday</th>
              <th scope="col">Monday</th>
              <th scope="col">Tuesday</th>
              <th scope="col">Wednesday</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" class="rowHdr">10:00am</th>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>           
            </tr>
            <tr>
              <th scope="row" class="rowHdr">10:30am</th>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>           
            </tr>
            <tr>
              <th scope="row" class="rowHdr">11:00am</th>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>           
            </tr>
            <tr>
              <th scope="row" class="rowHdr">11:30am</th>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
            </tr>
            <tr>
              <th scope="row" class="rowHdr">12:00pm</th>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>
              <td rowspan=""><div contenteditable="true"><textarea cols="20" rows="5" class="appt-text"></textarea></div></td>          
            </tr>
          </tbody>
        </table>

＆＃13;

我已经展示了所有元素边框，只是为了帮助说明问题。 div边界是红色的。 textarea的边框是绿色的（旁注：我也不确定为什么宽度不同）。

垂直居中的多线textarea

0 个答案: