如何使用CSS在DIV中居中文本

Question

我需要创建以图片为中心的上传按钮 我是初学者，请帮助解释如何使用。非常感谢。

这是我的代码： https://jsfiddle.net/marco83/ydgnkfw3/

HTML

<div class="media-left text-center container22">
    <img src="http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg" style="width: 150px; height: 150px;" class="image1"></img>
  <a href="#" id="upfile1">
  <span style="font-size: 28px;" id="img-upload-bt" class="glyphicon glyphicon-camera"></span>
  </a>
</div>
<input type="file" id="file1"  name="file1" style="display:none" />

CSS

.container22 {
   height: 10em;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}
#upfile1 {
   margin-left: auto;
   margin-right: auto;
}

这就是我想要的

Answer 1

一种方法是制作父容器relative并使用位置absolute作为您尝试居中的内部元素：

.image-container {
  position: relative;
}
#img-upload-bt {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -14px 0 0 -14px;
}

<强> JSFiddle Demo

Answer 2

您需要将父元素的css position属性设置为relative，将img设置为position:absolute。然后使用top, bottom, left and right的css属性来定位图像。

.container22 {
   height: 10em;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   position:relative;
}
#upfile1 {
   position: absolute;
   left:55px;
    top:55px;
}

See an example here

Answer 3

图像将图标推开 请改用背景图片

.container22{
    width:150px;
    height:150px;
    background-image:url('http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg');
    background-size:150px 150px;
    background-position:center top;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-right:0

}

https://jsfiddle.net/marco83/ydgnkfw3/

Answer 4

处理此问题的最简单方法是将图像设置为css中的背景图像，如果这是您特定情况所允许的 -

.container22 {
    height: 150px;
    width: 150px;
    background: url("http://images.buddytv.com/btv_2_505531673_0_1200_10000_-1_/the-pacific-james-ba.jpg") center center no-repeat;
}

删除标记的图像标记将创建您想要的外观。

如果你必须使用内嵌图像，你可以将position:relative放在容器元素上，并将图像或上传字形跨度放在position: absolute - 请注意你可能需要强制如果在图像上设置了宽度和高度，则容器上的宽度和高度。如果您在字形范围内设置它，您还需要left:0; right:0; margin: auto;来居中它。