The Old Center a Image in a Div Issue ( Image Size Variable - Div Size Fixed )

The old center a image in a div issue ( image size variable - div size fixed )

http://jsfiddle.net/dcGZm/13/

That code should solve your problem. I slightly Modified from this link: http://www.brunildo.org/test/img_center.html , using an :after psuedo element rather than an empty span.

Should work in IE8 and above.

a {
background: #000;
vertical-align: middle;
display: table-cell;
height: 260px;
width: 140px;
text-align: center
}

a:after {
content: ' ';
height: 100%;
display: inline-block;
width: 1px;
vertical-align: middle
}

a img {
max-height: 200px;
max-width: 100px;
vertical-align: middle
}

The old center a image in a div issue ( image size variable - div size fixed )

http://jsfiddle.net/dcGZm/13/

That code should solve your problem. I slightly Modified from this link: http://www.brunildo.org/test/img_center.html , using an :after psuedo element rather than an empty span.

Should work in IE8 and above.

a {
background: #000;
vertical-align: middle;
display: table-cell;
height: 260px;
width: 140px;
text-align: center
}

a:after {
content: ' ';
height: 100%;
display: inline-block;
width: 1px;
vertical-align: middle
}

a img {
max-height: 200px;
max-width: 100px;
vertical-align: middle
}

Center a large image of unknown size inside a smaller div with overflow hidden

What about this:

.img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}

This assumes that the parent div is positioned relatively. I think this works if you want the .img relatively positioned rather than absolutely. Just remove the position: absolute and change top/left to margin-top and margin-left.

You'll probably want to add browser support with transform, -moz-transform etc.

center a big image in smaller div

Here is the trick. It is easy to center the image horizontally. However the vertical centering is not so easy and involves more markup. You may use background-position property. Here is jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/

HTML

<div class="thumbnail">
<a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
</a>
</div>

CSS

div.thumbnail {
display: block;
margin: auto;
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
div.thumbnail a {
display: block;
width: 100%;
height: 100%;
background-position: center center;
}

There is a bad effect of course. Your image will not be indexed, because it is in a css style.

Center img inside smaller div not working as intended

Thanks to Abhitalks I found the problem I had with the flexbox. I've adapted the codepen so that it works with flexbox now.

For everyone who's seeking a solution to this, this is what your markup should be like:

HTML

<div class="container">
<img src=""/>
</div>

CSS

.container {
display: flex;
justify-content: center;
width: 50%; /* may have any percentage */
height: 100%; /* this is needed so that there will be no border at the bottom of the picture if window is resized */
overflow: hidden;
float: left; /* this can be left out if there is no textbox on the right side */
}

img {
min-width: 100%;
min-height: 100%;
}

Happy coding!

Center fixed div with dynamic width (CSS)

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.

#example {
position: fixed;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
}

See this example working on this fiddle.



Related Topics



Leave a reply



Submit