Question

我需要在textarea身高的中间找到问题图标垂直对齐确实有效。

我的主要内容.contorls位于我的float:right问题链接中以及该文本区域之后。
如何找到这个图标？

<div class="control">
   <textarea></textarea>
   <div class="icon"></div>
</div>

.control{width:700px;height:auto;}
.icon{height:20px;width:20px;}

Answer 1

这是一种相当简单的方法。

将display: table应用于.control父元素，将display: table-cell应用于.wrapper子元素，以使用CSS表格。在.wrapper内，使用vertical-align: middle垂直居中图标元素。

大多数现代浏览器都非常支持CSS表，因此解决方案非常强大。

.control {
  display: table;
  width: 700px;
  height: auto;
  border: 1px dotted blue;
}
.control .wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;  
  border: 1px dashed blue;
  vertical-align: middle;
}
.icon {
  height: 20px;
  width: 20px;
  margin-left: 5px; /* optional if needed */
  background-color: tan;
  display: inline-block;
}

<div class="control">
  <textarea></textarea>
  <div class="wrapper">
    <div class="icon"></div>
  </div>
</div>

VerticalAlign图像位置

1 个答案: