Horizontally centering image inside , why is margin:0 auto; NOT working?

Question

OR

#left-control {
   float: left;
   height: 300px;
   width:300px;
   background-color:crimson;
}

#left-control:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#left-control img {
    vertical-align: middle;
    z-index: 1;
 
 margin: 0 auto;
}

<a id="left-control">
    <img src="https://events.columbia.edu/3.10/calrsrc.MainCampus/themes/columbiaTheme/resourcesColumbia/FacebookIcon.png" />
 </a>

I have taken the following hack from here to vertically center an img in an a tag.

The problem is that I am used to using margin:0 auto; to center things. But the problem is that it is not working along with this technique of centering vertically.

Why is that? What can I do to solve this problem?

ketan · Answer 1 · 2016-01-01T06:04:32.840

Use following css:

#left-control::before {
    height: 100%;
    content: "";
}
#left-control {
    background-color: crimson;
    display: table;
    height: 300px;
    line-height: 300px;
    text-align: center;
    width: 300px;
}

Remove float: left; from #left-control. And use display: table; line-height: 300px; text-align: center;

And remove display: inline-block; vertical-align: middle; from #left-control::before

Working Fiddle

score 1 · Accepted Answer · edited Jan 01 '16 at 06:35

1

The image width is not 100%, thus a margin: 0 auto; will not work to center align the image. Your best bet is to do a text-align: center; on the <a> tag with ID left-control to make the icon center-aligned.

edited Jan 01 '16 at 06:35

Leon Adler

2,993
1
29
42

answered Jan 01 '16 at 06:03

Jared Thomas

110
7

score 1 · Answer 3 · answered Jan 01 '16 at 06:06

Add text align #left-control text-align:center

#left-control {
   float: left;
   height: 300px;
   width:300px;
text-align:center;
   background-color:crimson;
}

#left-control:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#left-control img {
    vertical-align: middle;
    z-index: 1;
 
 margin: 0 auto;
}

<a id="left-control">
    <img src="https://events.columbia.edu/3.10/calrsrc.MainCampus/themes/columbiaTheme/resourcesColumbia/FacebookIcon.png" />
 </a>

Horizontally centering image inside , why is margin:0 auto; NOT working?

3 Answers3