Struggling with the dreaded centring of different sized images in a DIV.
Got a solution from StackOverflow ( How to vertically align an image inside div ), using a <SPAN> as a dummy element (with vertical-align: middle) and it works well except for the images which are bigger than the DIV and these are correctly resized, but shown below the DIV.
If I remove the <SPAN>, then the centring works in the horizontal, but not in the vertical.
If there is a simple change, I can make as I like the simplicity of the solution.
The tests are at
http://mclportal.net/ModalTests.html
This will work for you:
<div id="divModal" style="display:table">
<div id="divImage" style="display:table-cell; vertical-align:middle">
<img id="img" src=".........">
</div>
</div>
You should put max width and max heights on your images. Then just use relative positioning of the images inside a div with a relative position. for instance...
<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>
Using an approach like this all images will be vertically aligned with each other and centered within their div container. Plus having max height and width set will allow the image to keep its aspect ratio.
#mcl not sure if you've managed to resolve your problem yet.
If not checkout out my blog post centering large images in smaller containers their is also a codepen demo on there.
I had the same issue and managed to get it working without any need of javascript or inline styles.
Hope it helps
Related
I'm working on a site where I have been given very strict spacing requirements. One of these is that there should be 30px margin between all images. The images themselves can be responsive but the margin must remain the same.
The problem I have run into is depicted below. Essentially I have two columns side by side. In one there are two square images with a 30px gap in the middle. In the other is a single tall image with a height equivalent to 2X the height of a square image + 30px (to account for the margin between the two squares).
On a large screen when the images are their full size this displays correctly, however on smaller screens the images shrink. As a result of this the + 30px included in the tall image size to match the margin between the squares is reduced. However the margin between images remains at 30px, this results in a gap at the bottom putting the images out of alignment.
What elegant solutions have people used for this issue before? I am sure it is a straight forward issue yet the only solutions I have found are convoluted and messy.
Tech-wise I'm working with the grid from bootstrap 3, and Styled Components.
So I've found a reasonably satisfactory solution, that keeps the images perfectly aligned and preserves the margin regardless of screen size. However, a drawback of this method is that the image is not centrally aligned within the containing <TallImage> div, meaning the true centre of the image is shifted to the right.
I'm going to leave the question open as I'd welcome seeing whatever other solutions anyone can come up with. But for someone that is looking, my solution is below.
import styled from 'styled-components';
const TallImage = styled.div`
height: 0;
margin: 0 0 30px;
overflow: hidden;
padding-top: calc(200% + 30px);
position: relative;
width: 100%;
img {
height: 100%;
position: absolute;
top: 0;
width: auto;
}
`;
<div className="row">
<div className="col-sm-6">
<SquareImage>
<img src="..." alt="..." />
</SquareImage>
<SquareImage>
<img src="..." alt="..." />
</SquareImage>
</div>
<div className="col-sm-6">
<TallImage>
<img src="..." alt="..." />
</TallImage>
</div>
</div>
I have a div with height:auto;
I do see that it will resize based on some elements. It does resize with just plain text for instance.
However, if i set a child div with specified size, the parent height:auto; div will not resize to fit around that child div.
So i was wandering if maybe changing the Display type would help? (no luck so far though).
Thanks
EDIT:
There are no floats inside the parent div, if not absolute elements are considered float?
The parent div is position:relative;
and the child div is absolute.
When i tried to use overflow:auto; on the parent div, scroll bars appeared on the parent div instead if making it bigger when needed.
Thanks for the replies!
<div style="height: auto; position:relative">
<div style="height: 50px; position:absolute;">ALOHA</div>
</div>
It sounds like your child DIV or content is floated. On its own, height: auto; will not scale around this as it doesn't recognise floats as a part of the regular document order.
Your best solution is probably to use overflow: auto; on your parent DIV.
Alternatively, if floats are responsible, your parent DIV will also wrap around floated content if you apply a float to the parent itself. This may not be ideal, though, because this will affect its placement - so overflow: auto; is most likely better.
If you can provide any examples of your code, I'm sure someone can give you a more specific example.
If you mean something like
<div style="height: auto">
<div style="height: 50px">ALOHA</div>
</div>
It will fix the parent.
Div doesn't fill parent div, but if you'll change your structure like thi:
<div style="height: auto">
foo bar foo bar<div style="height: 200px">heya</div>
<div class="clear" style="clear: both"></div>
</DIV>
height:auto will works.
edited ;)
Im trying to have a blueprint layout wich is 950px so I do something like the image below:
Like regular the 950px container ( right box ) is floating center page
Now I'm in the need of having a #menu div floating left towards this 950px box, it should be positioned left to this #container 950px div and have a fixed width.
How can such a thing be accomplished? I tried already several css tricks to no avail, i know there is liquid layout but then the space between #menu and #container will become to big I want that space to be fixed like in below example say 20px the blueprint default.
anyone knows how to make this happen and have the divs stay on page even when screen resizes?
if i understood your question this will do what you want:
body, html
{
width: 100%;
}
<div style="margin: 0 auto; width: 1100px">
<div style="width: 150px; float:left;">
menu
</div>
<div style="width: 950px; float:left;">
right part
</div>
</div>
<body>
...other stuff...
<div style="width: 30px; margin-left: 500px; bottom: 0px;">
<img src="picture.png">
</div>
</body>
margin-left is working. Cannot figure out why the picture won't stick to the bottom..
For bottom to be effective, you will have to also use position set to relative or absolute:
<div style="position:absolute; width: 30px; margin-left: 500px; bottom: 0">
<img src="picture.png">
</div>
Use absolute or relative position depending on your layout requirements.
Note: With position set, you can also use left, right and top.
You have to explicitly position the element to be able to use the bottom property:
For absolutely positioned boxes, this property specifies how far the bottom margin edge of the box is offset above the bottom padding edge of its containing block.
For relatively positioned boxes, this property specifies how far the bottom edge of the box is offset above the position it would have had in the normal flow.
DEMO - source
The element is missing a position rule for the bottom to take effect. quirksmode has a good article on CSS positioning.
I think You are looking for something like this.
<div style="width: 30px; margin-left: 500px;">
<img src="picture.png" style='display: block;'>
</div>
The img by default has some space below, is above text baseline. It isn't margin or padding. The most common way to change this is to set display of image to block.
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}