在div中垂直居中定位图标。

13 浏览
0 Comments

在div中垂直居中定位图标。

我想在我的div中央垂直地放置我的放大镜。

我应该如何做到这一点？

演示： http://jsfiddle.net/6ewn37gt/

span.text-content {
  背景: rgba(23, 165, 195, 0.5);
  颜色: 白色;
  光标: 指针;
  显示: 表格;
  不透明度: 0;
  宽度: 100%;
  高度: 100%;
  -webkit过渡: 不透明度 500ms;
  -moz过渡: 不透明度 500ms;
  -o过渡: 不透明度 500ms;
  过渡: 不透明度 500ms;
}
ul li:hover span.text-content {
  不透明度: 1;
}

    
    
  • 
	
	
    
    •

0

1 答案

0 Comments

问题的原因是希望将一个图标垂直居中在一个 div 元素中，但是没有垂直居中。解决方法是将 div 元素的 display 属性设置为 table-cell，并添加 vertical-align 属性设置为 middle，以实现垂直居中效果。

代码如下所示：

    
  
  • 
    
    
      
      
    
    
  
    •

在上述代码中，将 div 元素的 display 属性设置为 table-cell，将 vertical-align 属性设置为 middle。这样就可以实现图标在 div 元素中垂直居中的效果。

此外，还可以给 span 元素添加一个类，并应用以下样式：

span.text-content {
  background: rgba(23, 165, 195, 0.5);
  color: white;
  cursor: pointer;
  display: table;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
ul li:hover span.text-content {
  opacity: 1;
}
.imgCont {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

上述样式为 span 元素设置了背景、颜色、鼠标指针、宽度、高度、过渡等属性，并且通过设置 opacity 属性实现了鼠标悬停时的透明度变化效果。同时，通过给 span 元素内部的 span 元素添加 imgCont 类，并将其 display 属性设置为 table-cell，vertical-align 属性设置为 middle，text-align 属性设置为 center，实现了图标的垂直居中和水平居中。

通过以上的代码和样式设置，图标就能够垂直居中在 div 元素中。

0