Question

我正在使用骨架css框架，我想将我的fontawesome图标垂直对齐到textarea的右边，但它似乎是常见的“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

你可能需要假装它，因为骨架的方式是它的列。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以尝试创建一个重新显示图标的javascript函数。无论如何，如果你处理许多恐龙图标/ 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图标垂直对齐到textarea的中间

2 个答案: