I tried to center a div horizontal and vertical on the screen, but somehow it is slightly off center. Why is that? I think it is because of the content, but I don't know :D
I used
height:90%;
and
margin-top:5%
to center it.
Here's the full code:
http://jsfiddle.net/7mNue/1/
http://jsfiddle.net/j8tBw/
Cleaned up the markup a bit, and applied display: flex in a parent DIV.container (see links below, specially), and used center flex CSS properties.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.inlineflex {
display: inline-flex;
}
You may face problems in IE10 and below, other browsers are good (see caniuse link)
References:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://caniuse.com/flexbox
Apply margin: auto and set a full size (width & height) on the DIV.
Try this
.popup{
width:100%; // remove this and add below style
max-width:100%;
}
.popup img{
max-width:100%;
}
box-sizing: border-box on items that have margin and padding should sort it out
Related
Whatever I do, I can't seem to get the columns that float left and right to center and align to the middle of it's container. Is there a way with Flexbox only to just have a left and right column, but still align them in the middle? It works fine in Firefox and Chrome, but not on Safari 8.
https://jsfiddle.net/vhem8scs/68/
.container {
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
height: 200px;
margin-top: 20px;
}
.column:after {
content: '';
display: table;
clear: both;
}
.column div {
float: left;
}
.column div:last-child {
float: right;
}
Update
I added the following line to the container.
justify-content: space-between
While it aligns to the center/middle of the container, the floats do not work now.
Unfortunately it is rather difficult to visualize what you're trying to accomplish with your styles, but here's my preliminary analysis of the issue.
Once you declare an element to be a flex container, all the children will follow flexbox rules. Float styles will essentially be ignored. As a result, what you might want to try doing is making use of the flex-grow, flex-shrink, and flex-basis properties on the children to ensure columns sit in the proper position.
If you goal is to simply put space in between the columns, utilize the justify-content property with either space-around or space-between on the parent flex element.
Hope this helps!
http://alexandermasters.com/flora/2015/10/05/corey-boyce/
Trying to horizontally center the image within its respective container.
Can't seem to isolate the correct element with which to apply
display: block;
margin-left: auto;
margin-right: auto;
Have progressively worked my way through the code starting from the image and moving up to no avail.
Try this CSS code
.gallery-item {float:none; margin:0 auto; text-align:center}
targeting the IMG tag would not work because it is nested in another element, so you have to center the parent of the img.
when there is a float, margin:auto will not work properly
If you're not concerned about IE9 compatibility, you can easily achieve this by applying display: flex to the parent <dt> element.
Check out Chris Coyier's Complete Guide to Flexbox if you haven't already read up on this beautiful member of CSS3. I also recommend this article by Paddi McDonnell.
Flexbox underwent some prefixing inconsistencies, so it would be wise to have a fallback style if those users are important to you.
try this:
.gallery {
text-align: center;
}
.gallery dl {
display: inline-block;
float: none;
}
(also clear your browser cache)
this article mentions a technique of vertically centering an element in css using a 'ghost element'.
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
codepen here.
It doesn't work, however, when the element to be centered has width:100%, becuse the element gets pushed onto a new line. How you adapt the solution in order to work in this case? I need a solution with good browser support including IE9+
I figured it out, I was suffering from the "spacing between empty inline-block elements problem". There are a few ways to fix this, I fixed it by commenting out the whitespace between elements in the HTML.
Here is a working plunker
I have read lots of similar questions and tried to apply the answers by adding divs with position:absolute and relative aroudn the images to the code but I cannot get it to work.
http://store9711.americommerce.com/milk-glass-vases-and-candle-holders.aspx
I need to bottom align these thumbnails while keeping them horizontally centered
Is anyone able to show me how?
You will need to use the vertical-align property
CSS
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*Add this line*/
}
.category-product .thumbnail{
display:block;
}
Also give display:block to the anchor tag to keep the image horizontally center.
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*add this*/
}
The default Bootstrap setup (line 7 of bootstrap.min.css) on your site aligns to middle (applied to img HTML element). You'll just need to override for the category images.
I have a square div of fixed size and wish to place an arbitrary size image inside so that it is centred both horizontally and vertically, using CSS. Horizontally is easy:
.container { text-align: center }
For the vertical, the common solution is:
.container {
height: 50px;
line-height: 50px;
}
img {
vertical-align: middle;
}
But this is not perfect, depending on the font size, the image will be around 2-4px too far down.
To my understanding, this is because the "middle" used for vertical-align is not really the middle, but a particular position on the font that is close to the middle. A (slightly hacky) workaround would be:
container {
font-size: 0;
}
and this works in Chrome and IE7, but not IE8. We are hoping to make all font lines the same point, in the middle, but it seems to be hit-and-miss depending on the browser and, probably, the font used.
The only solution I can think of is to hack the line-height, making it slightly shorter, to make the image appear in the right location, but it seems extremely fragile. Is there a better solution?
See a demo of all three solutions here:
http://jsfiddle.net/usvrj/3/
Those without IE8 may find this screenshot useful:
If css3 is an option, then flexbox does a good job at vertical and horizontal aligning:
UPDATED FIDDLE
.container {
display:flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}
How about using your image as a background? This way you could center it consistently everywhere. Something along these lines:
margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
This is REALLY hacky, but it is what we used to do in the ie6 days.
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px; // half of whatever the image's height is, assuming 24px
margin-left: -12px; // half of whatever the image's width is, assuming 24px
}
I may be missing something in this example, but you get the idea.
Have you tried the following:
img {
display: block;
line-height: 0;
}
I usually use this hack, but I haven't really checked it that thoroughly in IE8.
Here is a small JS Fiddle I have made: http://jsfiddle.net/rachit5/Ge4YH/
I believe it matches your requirement.
HTML:
<div>
<img src=""/>
</div>
CSS:
div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}