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
Box-Shadow Only on Left and Right
React: How to Make an Input Only as Wide as the Amount of Text Provided
Set the Width of Children to Fill the Parent
Transform-Origin Not Working in Firefox Even Properties in Percentage Value
Why an Inline-Block Container Doesn't Collapse When Contains Only Floated Items
CSS Drop Down Navigation, 3Rd Level Issue
Jquery UI Tooltip Custom Class on Page Load
How to Change the Font Size of the List (Not the Initial View)
Less CSS - Accessing Classes Further Up the Dom Tree from Within a Nested Class
Preventing Horizontal Scrolling in Mobile Devices
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
CSS - Force Overflowing Elements to Disappear If Partially Hidden
Getting Rid of All the Rounded Corners in Twitter Bootstrap