I have a styling issue where I'm trying to center a wide image relative to it's container. The problem is that the image's width is unknown so I can't do the left:50%, margin-left:-###px; trick because I don't know what the negative margin value will be.
I also can't use text-align:center; because the the image is wider than it's container.
To make matters more complicated, the container's width is also unknown.
I'd quite like to avoid using JavaScript for this but it feels like a big ask with just CSS.
Anyone know of any magical solution here?
UPDATE:
Required support: IE8+, Chrome, Safari, Firefox, Android.
I have tried a couple of the examples provided by you lovely people which have not worked (they would work in most situations, but not mine).
#Vince - I tried your display block trick which works great when the window is wider than the image but when the window is not wider than the image, it effectively becomes 'left-aligned'.
See fiddle example. I have added another container to simulate a narrow mobile device window. Obviously this won't be a hard-coded width as in the fiddle. Also, the img width will not be hard-coded as in the example but I'm trying to simulate the situation that's presented to me.
http://jsfiddle.net/7n1bhzps/1/
Excuse the hideous colours.
UPDATE 2:
Accepted dfsq's answer. Contrary to above, it does not need to support IE8 because the problem is at mobile resolutions. IE8 is not a mobile browser so the need to support this is not necessary.
Thanks all.
Set the container's min-width to any value you feel necessary. Set the image to display as block and use the margin: 0 auto; trick to center it
HTML:
<div id="contain">
<img src="http://i.imgur.com/xs8vh.jpg"/>
</div>
CSS:
#contain {
min-width: 50px;
}
#contain img {
display: block;
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/j21a8ubo/
You can make use of CSS transofrm: translateX(-50%) to shift the image of unknown width. This technic allows to center image of any width relative to container.
.wrap {
margin: 0 0 10px 160px;
width: 300px;
height: 75px;
border: 3px red solid;
position: relative;
overflow: hidden;
}
.wrap:hover {
overflow: inherit;
}
.wrap img {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="wrap">
<img src="http://lorempixel.com/600/75/food/3" alt="">
</div>
<div class="wrap">
<img src="http://lorempixel.com/100/75/food/4" alt="">
</div>
Check for support http://caniuse.com/#feat=transforms2d
If you set X's CSS to margin:0px auto; it should center it within the parent container.
Sometimes centering doesn't work, but this can also be a browser-related issue.
If you can adjust the HTML, you could put the element to be centered in a cell in a <table> element, with a cell on either side of it. This is how it was done in IE8 and earlier, though it's not recommended now.
If unknown width of object and its container then use
.center-block{
display: table;
margin:0 auto;
float:none;
}
Related
I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)
but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?
There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.
I don't know if this will help, but it gives a blur effect.
A similar question was asked here:
Background blur with CSS
The developer used a svg blur to give a blur effect.
Don't know if that helps.
I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.
you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.
Please take a look at this: http://sources.freehosting.bg/landing.html
I am trying to vertically align #content so it looks good on larger (1920x1200) and smaller (1024x768) resolutions. By that I mean it does not have a scrollbar.
As you see there is plenty of free space so a scrollbar is unneeded.
The only solution I came up with is to calculate the height of #content with JS and to set a padding, but I realize it is the lamest possible solution.
Please advise me on how to achieve that.
See if this fiddle is what you are looking for. Simple solution IMO.
It works by forcing the containing div to behave as a table-cell, and making use of the vertical-align: middle style. It doesn't require you to know the heights of any elements at all.
Code used in the fiddle are below.
HTML:
<div class="a">
text inside div a
<div class="b">
text inside div b
</div>
</div>
The important styles are:
display: table-cell
vertical-align: middle
The rest are only there for demonstration. CSS:
div.a {
border: 1px solid red;
}
div.b {
border: 1px solid blue;
height: 200px;
display:table-cell;
vertical-align:middle;
}
If your content height is fixed put a div before the content
<div id="distance"></div>
<div id="content">
Vertically centered :D
</div>
and style it like:
html, body {
height:100%;
margin:0;
padding:0;
}
div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}
div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}
The only way I know of that works using pure CSS, no JS and no hacks requires you to know the height of the thing you're trying to position:
<html>
<head>
<style type="text/css">
/* Give your document height */
body, #content {
height: 100%;
}
/* Give your element height */
.thing {
width: 20px;
height: 300px;
background: #000;
}
/* Position thing */
#content .thing {
position: absolute;
top: 50%;
margin-top: -150px; /* half the height of the thing */
}
</style>
</head>
<body>
<div id="content">
<div class="thing"></div>
</div>
</body>
</html>
EDIT: Updated height of item, container id. Still works just fine.
There is one way to do this without javascript and without knowing the height of the content - but purists will not like it. Then again, sometimes it doesn't matter if it's not approved by the trendy people. Sometimes all you need is to get the job done because you boss wants it that way.
And the solution is: use a table (told you purists wouldn't like it). Do layout the old school way and abuse the fact that HTML specifies lots of capabilities to tables.
A table cell is the only HTML element that has a vertical alignment attribute that does what most people expect it to do. Just give the table 100% width and height (so that is expands with the window size) and use cell alignment to position the content you want.
I've only ever had to use this trick once and it still makes me feel dirty* but when you really need it it works better than anything else.
*note: I'm a purist myself but understand that sometimes a man's got to do what a man's got to do.
I've got a navigational bar (#nav_bar), which has the following CSS properties:
#nav_bar {
background: url(../images/navbar.png) repeat-x;
width: 100%; height: 50px;
margin-bottom: 20px;
}
It takes the width of #wrap which is 1024px wide and has margin: auto;, however I would like to expand it so that it will fit all screen sizes 100%. I attempted to set width: 500%; just to see what it would do, then I realized that it expands from the left -> right, rather than both ways from the center.
So, what I'm asking is;
Is it possible to have an element expand from the center, then
perhaps I could set the max-width property or use javascript to
find out the visitors screen resolution then assign the width from
there; without major inefficiencies, i.e. extended load times/cross-browser compatibility issues?
Just for reference, a link to the particular page I'm talking about
Any answers will be greatly appreciated ;)!
Simply move your #nav_bar out of the #wrap.
Alternatively you can make your #nav_bar have position: absolute; left: 0px; width: 100%; in CSS, that will work too.
Why don't you use CSS3 Media Queries, to find out about screen size of your clients.
If your #nav-bar is a block-level element, like a div, a ul or a p element, then it by default would take the whole width of its container. Thus you don't need to set width: 100%; there. Also, you can use text-align: center; to center align the content.
In your case, you can use absolute positioning with overflow: visible attribute, and set the width of the menu. Also, you may simply extract your #nav-bar out of the wrap, to let it take the whole space.
use margin: auto
you can see an example here: http://jsfiddle.net/s995c/4/
OK, here was my original question, where I've left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.
So far the classic trick for margin: auto doesn't work, because then width: 100% isn't the screen anymore.
#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
<div id="main" role="main">
<img src="img/bigimage.jpg" id="bigimage">
</div>
So I'm looking for an other solution. Any idea how to make max-width and horizontal centering work together?
Update:
OK, I'm almost there:
#main {
width: 100%;
text-align: center;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?
Also, a live site, with 500px max-width:
http://ilhaamproject.com/
Change your (updated) CSS to the following and it should work:
#main {
width: 100%;
text-align: center;
}
if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.
HTML:
<div id="container">
<img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
</div>
CSS:
#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}
BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.
You have the #bigimage img within the #main div. Since the main div is 1024px wide, the 100% will always be 1024. The result here is that you'll always see 1024px. If you remove the width attribute from #main or change it to 100%, you should start to see what you're looking for.
Demo
I ended up opting for display:table-row ... oh well :P
What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto;
margin-right: auto;
like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content {
width: 300px;
margin: 0 auto;
}
This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
"Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.
You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.
If your HTML is this;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
And your CSS is:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.
Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.
You can view a working example of this here: http://jsfiddle.net/UXKcA/3/
edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)
Check this Demo jsFiddle
Set following two things
HTML align attribute value center
CSS margin-left and margin-right properties value set auto
CSS
<style type="text/css">
#setcenter{
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
}
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
"If the width and height are really unknown beforehand, then you'll
need to grab Javascript/jQuery to set the margin-left and margin-top
values and live with the fact that client will see the div quickly be
shifted during page load, which might cause a "wtf?" experience."
You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.
$(function(){
$("#content").hide();
)};
$(window).bind("load", function() {
$("#content").getDimSetMargins();
$("#content").show();
});