在div标签中垂直居中图像 [英] Vertically centering image in a div tag

问题描述

可能重复：

垂直和水平居中图像？ css

如何设置div标签中的图片

How would I go about setting an image I have in a div tag to be in the exact centre?

我只能找到 text-align：center; 的指南，

推荐答案

位置居中长期以来一直是css的问题。所有上述建议都可以工作，但每个人都有轻微的黑客感觉。如果你不需要支持IE或Opera，开始使用html5灵活框模型是真棒： http://www.html5rocks.com/en/tutorials/flexbox/quick/

Position centering has long been an issue with css. All of the above suggestions work, but every one of them has a slightly hacky feel. If you don't need to support IE or Opera, start using the html5 flexible-box model which is awesome: http://www.html5rocks.com/en/tutorials/flexbox/quick/

.centerbox {
  /* basic styling */
  width: 350px;
  height: 95px;
  font-size: 14px;
  border: 1px solid #555;
  background : #CFC;

  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

这篇关于在div标签中垂直居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！