I have a vector img that appears, with the correct dimensions, in a responsive div-box using this css:
.col1 > div {
width:100%;
height:25%;
position: relative;
}
.thisIMGcontainer {
height: 100%;
width: 100%;
position: absolute;
display: table;
}
.thisIMG {
background-image: url('../img/thisIMG.png');
background-size: contain;
background-repeat: no-repeat;
}
For this HTML:
<div class="col1">
<div class="box1">
<div class="thisIMGcontainer"><div class="thisIMG"></div></div>
</div><!--/box1-->
</div>
I have tried multiple combinations of CSS to get the img aligned in the center, but it either remains aligned to the left, or it randomly disappears!
display: table-caption; or display: inline-block; and margin: 0 auto;
You image div has no width, so it takes all available width - 100%. If you want an image to be centered, you either have to use <img> tag instead of using a background image, or you have to set a width in .thisIMG class.
Related
Lets say I have a div of heigh 400px and width 400px.
<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>
Now if I have a image of height 350 and width 200 px I want it to be adjusted in this div. I mean it adjust inside the div being child to the div. It should not fit to the div neither stretch. Just fit in the center.
Like div should be taken as 100% and image should be in its ratio.
Remaining 50 px in height and 200 px in width should be left. like buttom and top leaving 25 25 px and left and right leaving 100 100 px.
Also if the image is of say width 800px and height 700 px same way the div height and width should be considered as 100 percent and the image should lie in the middle without any stretch
I am not a front end developer :(
So you want the image to be centered inside the div, in its original size, and any overflow simply cut of when the image is larger than the div in any dimension?
Well you could just set it as a centered background-image, instead of using in actual img element.
If that’s not an option, position it absolutely – -50% from either “side” (top, left, right and bottom), and use margin:auto to center it:
div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
bottom:-50%; margin:auto; }
<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>
You can achieve this using transform property of css.
Here is the fiddle
div {
position: relative;
}
img {
display: block;
margin:0 auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note, I cleaned up the inline styles, just to make it clear.
http://jsfiddle.net/s4ja2q1z/4/
div {
width: 400px;
height: 400px;
background: lime;
text-align: center;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
EDIT: Added fixes if the image is taller than the container.
Try putting max-width and max-height on the image:
<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />
This will keep the image dimensions limited to a maximum width and height of the parent container (aka 400px in this case) and it will scale down if you ever change your parent div's dimensions without changing any ratios that would cause stretching.
You can do it this way too by using the table-cell property.
http://codepen.io/Edrees21/pen/XJoEmp
<div class="container">
<img src="http://placehold.it/350x200/aEEAEE" />
</div>
.container {
width: 400px;
height: 400px;
text-align: center;
background-color: #cccccc;
vertical-align: middle;
display: table-cell;
}
I would set the image as a background of your div and then change the size of it using background-size: contain.
This will make your image not be distorted, but still fill the entire div.
<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;">
</div>
div {
text-align: center;
}
img {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}
This question already has answers here:
Horizontal center dynamic image in div with absolute position
(2 answers)
Closed 8 years ago.
I want to have a page which displays an image as large as possible but with the whole image in view, without changing the proportions of the image, and centred on the page (i.e. full height with borders either side, or full width with borders top and bottom). Is there a way to do this purely in CSS? I've tried various combinations of width/height/min-width/min-height properties and can't get it to display as I'd like.
I also want to be able to overlay a link that consists of a div with a background image, which changes on hover, the code for which is below. I want this to be positioned at the top right of the image:
HTML:
<div class="imagecontainer">
<img src='gallery/images/<?php echo $image;?>' max-height="100%" width="100%"/>
<div class="backbuttoncontainer">
<a class="gallerybackbutton" href="gallery/index.htm"></a>
</div>
</div>
CSS:
.imagecontainer{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.backbuttoncontainer{
text-align:right;
margin-top: 10px;
margin-right: 10px;
height: 38px;
width: 100%;
display: block;
}
.gallerybackbutton{
background: url('icons/back_to_gallery.png') bottom;
display: inline-block;
height: 28px;
}
.gallerybackbutton:hover{
background-position: 0 0;
}
perhaps this is what you want : JSFIDDLE, here's how:
create a container for the image in any dimension you want (200x200 or 400x200 or 200x400 ), then put the image inside the container, with style
vertical-align: middle // to make your image centered vertically, but it's relative to the inline element, so if you don't have any text or set line-height for it's siblings, it doesn't work
max-width: 200px; // or your container width
max-height: 200px; // or your container height
// this style is used for my example with the container max-width and max-height set to 200px
then in the container add this style
text-align: center; // to make it centered horizontally
width: 200px; // for example
height: 200px; // for example
border: 1px solid red; // only to show the container in this example
line-height: 200px; // this will make the inline element in the center from 200px, or so
or another method by using pseudo element in this JSFIDDLE, you need to make a container and the image that going to be centered :
<div class="block">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" class="centered" />
</div>
add pseudo element to the container block
.block:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; // to remove the spacing that's created by inline-block
}
and add style for the image that's going to be centered
.centered {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
here's the explanation from css tricks: centering in the unknown
To use margin: auto you have to have a static width.
But your Image is a pixel image and will have that static width.
Just set your width of image and margin to auto:
.backbuttoncontainer{
margin:auto;
height: 38px;
width: 100px;
}
set image as background and try the following code
class-name{
background:url('1.jpg') no-repeat center center fixed ;
width:100%;
height:auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale')";
I'm trying to center an element of a precise size on a background that is built specifically for it, in order to make it appear seamless.
In the following code, #window represents the browser's window size in pixels (change it to anything). #background obviously refers to the background image I'll be using, and #positionMe is the object I want to fit on the background. I want the background to always be centered in the browser even if the window is resized, and I want the kitten to always be centered in the black box on the background.
As you can see below, the problem is that the background isn't centered on the viewport to begin with; it's centered based on total width of the browser. And when you resize the screen, it doesn't adjust accordingly.
HTML:
<div id="window">
<div id="background">
<img id="positionMe" src="http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg" />
</div>
</div>
CSS:
#window {
background-color: red;
width: 1280px;
height: 720px;
}
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
}
#positionMe {
position: relative;
top: 174px;
left: 154px;
}
This Fiddle demonstrates my issue.
Using a combination of display:table-cell and vertical-align:center will center your image vertically. In addition, you can simply use text-align:center to center your image horizontally.
http://jsfiddle.net/reinmcha/XtQ37/10/
Might need to do a little adjusting to keep the background div centered. So, we add another div and set to display:table. The "table cell" will fill the whole thing. Now we center the table with margin: 0 auto.
Final Product:
http://jsfiddle.net/reinmcha/XtQ37/20/
Might need to do some updating to get the image to center perfectly with the border (since it has width...)
Here's my go at it.
I hope you are aware there are tons of articles on this topic. Search around. You'll find your answer :)
You basically have two options, one would be using a div to display an image and making the image a centered background like so:
<div id="window">
<div id="background">
<div id="centerMe"></div>
</div>
</div>
with css:
#centerMe {
width: 100%;
height: 100%;
background: url('http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg') no-repeat center;
}
or for a pure css solution:
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#background:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#centerMe {
vertical-align: middle;
}
I initially had vertically centered text using the table/table-cell display method, which worked great. The problem came when I switched to a percentage height for the container and used a block level image (sibling to the text in question) to set the size of the container. I can no longer get the absolutely positioned text to equal the container height without declaring a static container size. Obviously this is simple to solve with JS, but I'd prefer not to go that route.
I'm also using picturefill.js to serve images, so using the image as a css background isn't an option (unless anyone has suggestions to make it work).
Here's the fiddle:
http://jsfiddle.net/rHZdQ/
And here's the code:
HTML
<div class="tile">
<a href="#">
<img src="#">
<div class="header-container">
<h2>title</h2>
</div>
</a>
</div>
CSS
.tile {
position: relative;
}
img {
display: block;
}
a {
display: block;
position: relative;
}
.header-container {
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
h2 {
display: table-cell;
text-align: center;
vertical-align: middle;
z-index: 199;
}
Centering Text in an Absolutely Positioned Image Overlay Using CSS
Consider the following HTML snippet:
<div class="tile">
<div class="image-container">
<img src="http://placekitten.com/400/400">
</div>
<div class="header-container">
<div class="panel">
<h2><span>percentage sized div</span></h2>
</div>
</div>
</div>
and apply the following CSS rules:
.tile {
border: 3px solid #555;
position: relative;
margin: 6px;
float: left;
}
.image-container img {
display: block;
height: 100%;
width: 100%;
}
.header-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-container .panel {
display: table;
width: 100%;
height: 100%;
}
.header-container .panel h2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.header-container .panel h2 span {
display: inline-block;
padding: 5px;
border-radius: 5px;
background-color: rgba(255,255,255,0.5);
}
The parent/containing block is div.tile, and it has two child elements, .image-container which is in-flow, and .header-container which is absolutely positioned and hence out-of-flow.
Since .tile is floated, it shrinks-to-fit the content, which is the image in .image-container, with the dimensions determined by the native height and width of the image.
To create the overlay, .header-container is absolutely positioned to the top and left of its relatively positioned parent, with 100% width and height which forces it to extend to the containing block (see yellow outline).
Within .header-container, create an anonymous table by setting display: table to .panel, and specify 100% width and height so it extends and fills the .header-container.
Finally, define an anonymous table-cell on .panel's nested <h2> element, and apply text-align: center and vertical-align: middle to center the text post horizontally and vertically.
Note that the table-cell will extend the full width and height of the table so if you want to style the text with a border or background, you need to wrap it an inline-block element (the <span> in my example).
You can view the code at: jsFiddle Demo
Does your .header-container need to be width:100%? Can you use pixels instead?
If you use pixels and you do the following, then it will center it:
.header-container {
display: table;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 400px;
margin-left:-200px;
}
Basically, margin-left has to be equal with half the width and a minus in fornt and then left:50%
UPDATE:
After informing me that it has to be only with percentage, the Jquery would be this:
$(document).ready(function() {
var minus = '-';
var headerwidth = $(".header-container").width();
$(".header-container").css('margin-left',minus+(headerwidth/2)+'px');
$(".header-container").css('left','50%');
});
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}