0

我正在使用骨架 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>

4

2 回答 2

0

由于骨架样式其列的方式，您可能需要伪造它。

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

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

于 2015-05-01T10:17:20.130 回答
0

您可以尝试创建一个 javascript 函数来重泛图标。无论如何，如果您要处理许多动态图标/文本区域，可能会有点麻烦。

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 中测试过，效果很好。在铬中它不能很好地工作。也许您必须为不同的浏览器编辑代码

于 2015-05-01T11:27:54.730 回答