How can I use CSS to center text in DIV

Question

I need to create upload button that centered at an image.
I'm a beginner, please help and explain how to use. Many thanks.

Here is my code: 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;
}

Here is what i want
enter image description here

possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — EfrainReyes, Apr 17 '15 at 02:12

score 2 · Accepted Answer · answered Apr 17 '15 at 02:15

2

One approach is to make the parent container relative and use position absolute for the inner element you're trying to center:

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

JSFiddle Demo

answered Apr 17 '15 at 02:15

Miguel Mota

17,966
5
37
55

thanks, chosen this answer because i also want to use `img` tag. – Marcus Apr 17 '15 at 03:26

Ben Rondeau · Answer 2 · 2015-04-17T03:12:46.520

0

You need to set the css position property of the parent element to relative and img to position:absolute. Then you use css properties of top, bottom, left and right to position the image.

.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.

edited Apr 17 '15 at 03:12

answered Apr 17 '15 at 02:14

Ben Rondeau

2,793
12
20

milkman15 · Answer 3 · 2015-04-17T02:21:51.287

The image pushes the icon out of the way Use background image instead

.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/

score 0 · Answer 4 · answered Apr 17 '15 at 02:16

The easiest way to handle this would be to just set the image as a background-image in the css, if that's something your particular situation allows for -

.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;
}

That + removing the image tag for the markup will create the look you want.

If you have to use the image inline, you can put position:relative on the container element, and position either the image or the upload glyph span with position: absolute - note that you may have to force a width and height on the container if you set that on the image. If you set it on the glyph span, you'll also need left:0; right:0; margin: auto; to center it.

How can I use CSS to center text in DIV

4 Answers4