将 fontawesome 图标垂直对齐到文本区域的中间

Question

我正在使用骨架 css 框架，我想将我的 fontawesome 图标垂直对齐到文本区域的右侧，但似乎常见的 "vertical-align:middle; display: table-cell;" 不起作用。我还想当 textarea 调整大小时，图标仍然居中对齐，而无需在样式中硬编码高度，这可能吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


<style type="text/css">
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
}
</style>

<div class="row">
  <div class="six columns">
    <label for="inputA">labelA</label>
    <textarea class="u-full-width" id="inputA" type="text"></textarea>
  </div>
  <div class="one colum">  
    <span class="icon"> <i class="fa fa-check-circle"></i> </span>
  </div>
</div>

Answer 1

由于骨架为其列设置样式，您可能需要伪造它。

因此，您可以根据需要使用绝对定位来偏移图标：

.six.columns {
  position: relative; /* <-- ensure the icon positions relative to the parent column */
}
#inputA {
  margin-bottom: 0; /* <-- remove the textarea margin, making the icon look like its not centered */
}
.icon {
  position: absolute; /* <-- position the icon */
  /* transform:translateY(-50%); OPTIONAL, use for true vertical alignment */
  top: 50%;
  right: -20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


<div class="row">
  <div class="six columns">
    <label for="inputA">labelA</label>
    <textarea class="u-full-width" id="inputA" type="text"></textarea>
    <span class="icon"> <i class="fa fa-check-circle"></i> </span>
  </div>
  <div class="one column">
  </div>
</div>

Answer 2

您可以尝试创建一个 javascript 函数来重新标记图标。无论如何，如果你处理许多动态 icons/textareas.

可能会有点麻烦

css:

.icon {
  margin-left: 1em;
  vertical-align: middle;
  display: table-cell;
  position:absolute;  <--- additions
  padding-top:52px;   <--- additions
  padding-left:269px; <--- additions
}

HTML（注意onClick="resiz()"指令）

<textarea onClick="resiz()" class="u-full-width" id="inputA" type="text"></textarea>
<span id="ico" class="icon"> <i class="fa fa-check-circle"></i> </span>

JavaScript

document.resiz=function(){

    var he = document.getElementById("inputA").offsetHeight;
    var wi = document.getElementById("inputA").offsetWidth;

    document.getElementById("ico").style.paddingTop=(he/2+20)+'px';
    document.getElementById("ico").style.paddingLeft=wi+'px';
}

代码如下：https://jsfiddle.net/ko2dzcfc/

你也可以让 resiz() 指令在页面加载时执行，这样它会在开始时自动正确放置图标，避免编辑 css。

更新：我在 Firefox 中测试过，效果很好。在铬中效果不佳。也许您需要为不同的浏览器编辑代码

将 fontawesome 图标垂直对齐到文本区域的中间

vertically align fontawesome icon to the middle of a textarea

css

skeleton-css-boilerplate