I am trying to center some images (horizontally) which overflows their container divs.
The containers (and images, for that matter) have a height of 160px and I want to keep them with that height, even at smaller screen-sizes - but still keep the image horizontally centered.
I have tried margin: 0 auto; with no luck.
I came across an half-solution where it was suggested to use text-align: center; on the container div along with margin: 0 -100%; on the image itself. However this solution seems to only work with webkit based browsers.
In eg. Firefox the result is this:
HTML:
<div class="row-fluid">
<div class="span6">
<a>
<img src="image1.jpg">
</a>
</div>
<div class="span6">
<a>
<img src="image2.jpg">
</a>
</div>
</div>
CSS:
.span6{
height: 160px;
overflow: hidden;
text-align: center;
padding: 0;
}
.span6 img{
height: 160px;
width: auto;
margin: 0 -100%; /*Only works for webkit based browsers*/
}
Any ideas? Thank you in advance.
.
EDIT:
I found out that editing margin: 0 -100%; to margin: 0 -50%; did the trick (both in Chrome, Firefox, IE, etc). However I am going with Andrey's solution since it is more likely cleaner, I assume.
May be this will help
.span {
display: flex;
align-items: center;
justify-content: center;
}
Related
I need to overlap two images that I centred using the following CSS:
display: block;
margin: auto;
The current situation is this-
The current situation
I want the bigger image (the one at the bottom right now) to be under the smaller image and the text without losing the already centred positions. I've tried with z-index and setting the positions to relative and absolute but that just messes up with the alignment of the images.
HTML:
<img id="logo" src="Pics/logo1.png" class="animated bounceInUp">
<img id="wall" src="Pics/Ywall1.png">
CSS:
#logo
{
height: 200px;
width: 200px;
display: block;
margin: auto;
padding-top: 15%;
}
#wall
{
height: 500px;
display: block;
margin: auto;
}
Tried this answer also but again I got issues with alignment. Adjusting the top and left values is not only a big headache but it also doesn't give perfect centring.
This: Overlap Images In Center [css]
P.S- Stackoverflow won't let me embed images and embed 2 links until I get 10 rep. Sorry for that.
Would it be possible to have the larger image as a background?
#wall {
height: 413px;
width: 620px;
display: block;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
background-image: url('http://cdn2.spectator.co.uk/files/2016/07/wall.jpg');
text-align: center;
}
<div id="wall">
<div>
<img id="logo" src="https://logopond.com/avatar/1862/logoholik-icon-logopond2.png" class="animated bounceInUp">
<div>Logo Text!</div>
</div>
</div>
I'm having an issue with flexbox on IE11 and while I'm aware there's lots of known issue, I haven't been able to find a solution...
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>BLAH</p>
</div>
</article>
</div>
And the CSS...
img {
max-width: 100%;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
.article-content {
padding: 20px 35px;
}
Images are getting stretched within a flex container.
Applying align-items: flex-start (I figured, since "stretched" is the default value...) or justify-content: flex-start doesn't seem to work.
Codepen: example of what I mean
What am I doing wrong?
to avoid this funny behavior, you may reset the flex-shrink property.
This looks like a bug, despite what Microsoft says:
<'flex-shrink'>
Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.
If omitted, the element's negative flexibility is "0". A negative value is not valid.
Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx
img {
max-width: 100%;
flex-shrink: 0;
}
img {
max-width: 100%;
flex-shrink: 0;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
article.post-grid .article-content {
padding: 20px 35px;
}
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
<p>Recommend new contented intention improving bed performed age.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>SHORT TITLE</h2>
<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
</div>
</article>
</div>
http://codepen.io/anon/pen/KzBOvq
I had image stretch on the cross-axis (stretch in height, using flex-direction: row).
This Stack Overflow Q/A helped me solve it:
Link here
I had to set the following CSS on my img:
align-self: flex-start;
You might need another value than flex-start of course, depending on your goal. Mine is to have my image be at the top of the row.
I had a similar bug in IE11.
The styles were taken from Bootstrap 4.1, so for the fluid images I had:
.img-fluid {
border: none;
height: auto;
max-width: 100%;
}
In my case it appeared that the reason was in max-width: 100% so when I changed it to width: 100% the bug disappeared:
.img-fluid {
border: none;
height: auto;
width: 100%;
}
This solution is not for everyone's case but I hope it would be helpful.
in my case combination of "flex-shrink: 0" suggested by G-Cyr and "align-self: flex-begin" suggested by Rick Schoonbeek did the trick. I had a wrapper which was using flex box to center the image with a "justify-content: center;"
All was good in IE 11, Chrome, Safari except IE Edge was not able to display correctly. adding the two attributes on image resolved the problem with IE Edge.
I tried every solution here but nothing worked. The only thing I was using flexbox for was to vertically center an image shown when hovering another image. So I just used a more classic solution à la top: 50%; transform: translateY(-50%) and then it was ok. So essentially not using flexbox at all then.. #hateIE
I had an issue with stretched product images in IE11, and I did some research and tried different things.
This was my code:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
height: 100%;
object-fit: contain;
top: 0;
}
}
I then realized that my image height: 100% was the culprit of the stretched image, and I simply removed my height, but then my image was at the top of my .productImage container instead of being centered vertically. I introduced flex here and positioned it through a simple align-items: center, but this of course didn't work in IE11. I also tried the flex-shrink: 0 but that didn't work either.
I then went ahead to skip using flex and tried the classic top: 50%; left: 50%; transform: translate(-50%, -50%); but this wasn't good either since I already had a transform in use for my zoom on hover effect on the image.
I ended up with this solution instead:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
It worked like a charm
I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
And my CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?
You can use the almost same CSS, but with one simple correction, change:
vertical-align: middle;
And remove these:
display: inline-block;
position: relative;
There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Click on Run Code Snippet and press Full Page to check if this is what you are expecting.
Try changing display: inline-block to display: block (as well as removing margin-left: auto; margin-right: auto;. If you're ok with #imagesMain taking up 100% of the width of the screen, with the images centered inside, this will work fine.
try learing flexbox because it has many uses for nicely aligning items and content.
it also keeps your css very small.
if you would like to keep them centered al the time. you should use justify-content: center;
#imagesMain{
display: flex;
justify-content: center;
}
#imagesMain img{
height: 400px;
width: 300px;
margin: 0 10px;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
for alternative uses look at css tricks they give good examples for how to use flexbox.
Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:
#imagesMain{
position:relative;
display: inline-block;
width:100%;
height:250px;
margin-top:20px;
background-color:red;
text-align:center;
}
#imagesMain img{
background-color:blue;
height: 200px;
width: 150px;
margin-left:-4px; /* trick for remove the space beetwen */
}
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/
And this is the example: https://jsfiddle.net/bcpph0pp/2/
I have tried everything I know, and I still can't get it to work. I want the four images to be like in the screen shot, but a lot bigger (600px centered). When I do this, however, it causes the entire container to be shifted to the left for some reason unknown to me.
HTML snippet:
<body>
<div class="container">
<div class="header">
..
</div>
<div class="menu">
...
</div>
<div class="content">
<div class="photos">
<h2> Here are some photos.....</h2>
<img src="img1">
<img src="img2">
...
</div>
</div>
</div>
</body>
CSS snippet:
body{
margin: 0;
padding: 0;
}
.container{
background-color: #AAC1CC;
max-width: 1440px;
width: 100%;
height: auto;
margin: 0 auto;
padding-bottom: 10px;
}
.content{
margin-left: 20px;
margin-bottom: 100px;
}
.photos {
background-color: pink; /* for testing */
width: 500px; /*for testing - normally 100% */
padding: 0;
margin: 0;
}
.photos img{
width: 100px;
display: block;
border: 2px solid black;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
box-shadow: 0 0 30px 3px #333;
}
Screenshot:
When the images are small (like 100px) the style is the same across the other tabs. However, if I increase the size of the images > 150px, the entire container shifts to the left by like ~20 pixels. I have tried using <br> between the images instead of display:block but it doesn't make a difference.
Why does this happen?
The only thing I can think of is that when the images are larger they cause the browser to display a scroll bar. As you have set the container width to 100% and the window width is now slightly smaller this could cause the shift that you mention.
I had a similar problem with a large image causing my main container to shift off center. threeandme's post reminded me to experiment with the overflow-y property in the css. I added overflow-y: scroll; into the css for "body" and it stopped it from shifting for me.
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.