VerticalAlign图像位置

html
css

2014-10-06 94 views -1 likes

-1

我需要在textarea高度中间找到该问题图标。
垂直对齐确实起作用。VerticalAlign图像位置

我主要的div .contorls，我的链接有问题与float:right内部和文本区域之后。
如何找到这个图标？

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

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

来源

2014-10-06 user2508630

我们需要看到一些HTML/CSS。我不知道你的问题是...？ – misterManSam 2014-10-06 08:03:23

.control {width：700px; height：auto;} .icon {height：20px; width：20px;背景：＃000;显示：内联块; vertical-align：baseline;} – 2014-10-06 08:16:44

我使用年份样式：http://prntscr.com/4tirwt 不工作:( – user2508630 2014-10-06 08:24:00

回答

这是一个相当简单的方法来做到这一点。

通过将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>

来源

2014-10-06 11:12:51

VerticalAlign图像位置

回答

相关问题