相关疑难解决方法(0)

我试图让我的文本垂直对齐到abc div的div中间.

我想保持高度为50px,文本在div的中间垂直对齐.

我还没有找到解决这个问题的方法,也许我找不到合适的东西.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

我需要一个工作的解决方案来做一个繁琐的任务,将不同尺寸的图像居中,当浮动时使用方形div:左边用于将图像放在行中.我在div中使用div来做技巧:

 .outer-element{ //wrap tile div
     display:table-cell;
     width:300px;height:300px;
     text-align:center ;
     vertical-align:middle ;
     float:left;
     margin-bottom:15px;
 }
 .inner-element{ //div with image inside
     display:inline-block;
 }

但我必须使用float:left for outer-element将图像放入行中,当我做的时候图像不是垂直居中的(它们与div的顶部边框对齐)我尝试了一些其他CSS代码但浮动:左边总是生成图像没有垂直居中.