I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.
i tried using vertical align center. But it seems not to work.
Which are the best practices to do so ?
http://play.mink7.com/h/mspre/
If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.
If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.
For example:
.someElement {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.
#container { width: 900px;
margin: 0px auto 0px auto;
}
This will centre the div. Bob's your uncle.
If you want I can post examples of this.
Mike
Here you go:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Related
I am working on a graphically intense layout, so to keep file size down I am limiting the layout to a 1600 pixel fixed width.
Of the 1600 pixels, the important content falls within the center 1230.
I am trying to find a way to center the layout in the browser while keeping the content scrollable.
This solution does not center when the browser window is less than 1600px
#page{margin: 0 auto;}
This solution makes left hand side of content unreachable as the browser width gets smaller.
#page{position: absolute; width: 1600px; top: 0; left: 50%; margin-left: -800px; }
Thanks for any help.
If you want to center an element in a wrapper that is smaller than the element and you can use absolute:
#page{
position: absolute;
width: 1600px;
top: 0;
left:-100%;
right:-100%;
margin-left: auto;
margin-right: auto;
}
example:http://jsfiddle.net/pavloschris/T5d8W/
I'm not sure you need to limit width in pixels. It isn't very portable across devices, and it's not clear why you're doing it. However, if you want to center a 1230px region within 1600px, you can just use fixed-width margins of size (1600-1230) / 2.
For more flexible solutions, are flex-boxes an acceptable technology? If so, they make this task trivial. Make page container with:
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
Then make your items
flex: 0 0 auto
or set a specific width instead of auto.
This solution solves the inaccessible content issues.
If you have the following structure
#wrap.constrained > #layout > #content.constrained
You can use the constrained class to limit both #wrap and #content to the desired width and center both horizontally by setting side margins to "auto".
You could then position #layout absolutely, have it be bigger than .constrained, and use a combination of left positioning and negative left margin to center it in regards to #wrap.
Here's an example: http://jsfiddle.net/caKA7/
I want to create an header image for my website.
I would like the image is always in the middle would have standing. When someone's browser reduced, the image in the center stand. Now I have an example that this site contains only get there no matter how this is done.
http://aarkcollective.com/
#Leeish has the right idea.
Another way is to use the following css
.center_element {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* half of the height of the header */
margin-left: -150px; /* half of the width of the header*/
}
With the HTML:
<img class="center_element" src="images/header_image.jpg" width="300" height="100">
div{
margin: 0 auto;
width: [whatever]%;
}
As long as your image/div has a fixed width or percent so it scales, it will stay centered with a left and right margin of auto. This is probably a duplicate question so you should probably look around for another answer.
EDIT
I am editing my answer based on your comments. I made this fiddle to do what I was talking about. http://jsfiddle.net/P8eDT/ I put two divs in it. One with an image and one without so you can see. The inner div is flexible width, set height, and stays centered. The image inside the second one is "responsive" in that it will always match the width of the div. As far as I can tell this is exactly what they are doing in your example site you posted. Posted below is the code for the INNER div (The one that is the image).
#inner {
width: 50%;
height: 100px;
margin: 0 auto;
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}
Please note you will need a javascript fall back for older versions of IE that do not support background-size:cover. I've done this before and I just use javascript to measure the width/height and which ever is longer I just set that one.
you can use position:fixed in your css
say that your header has a class of .header and a width and height of 800x50
in your css try:
.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}
edit if you do not want it to center vertically Leeish has the better solution
I'm trying to think of a clever way to deal with a part of a webpage where the image is going to be swapped out with different images (of varying widths, max being 620px wide), and a text caption is absolutely positioned over it. I want the text to absolutely position based on the width of the image rather than the width of the relatively positioned container.
I was thinking maybe something with background-image, rather than an image itself, but then I have to deal with the fact that it's an empty div with a background image, so I'd have to hardcode a height, which wouldn't work since some of these images would be taller than others.
Any solutions you guys can think of would be greatly appreciated. Thanks!
I'm not sure if I'm following 100%, but here's how to do what I think you're trying to do.
Create your container with position relative, set your widths and heights, and set overflow to hidden:
.container-outer {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
Next, create an inner container inside of it that simply has position: absolute
.container-inner {
position: absolute;
}
Finally, create your overlay text style to be 100% width and center horizontally (or however you want it to be positioned)
.overlay {
position: absolute;
text-align: center;
width: 100%;
margin: 0;
}
Here's the jsfiddle with an example: http://jsfiddle.net/BGvca/1/
Good luck!
I raise the previous answer with some more CSS
<div class="imageholder">
<div class="caption">Simon & Garfunkel</div>
<img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>
.imageholder{
position: relative;
float: left;
}
.caption{
position: absolute;
top: 0;
left: 0;
right: 0;
font-family: Helvetica,sans-serif;
font-size: 1em;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 1em 2em;
}
See the jsFiddle for reference.
If you make the div containing the image inline-block, its width will scale to the size of its content, ie your image.
Once the container is sizing correctly, you can center other child elements, like your caption, inside it using a wrapper with text-align: center, or no wrapper and value of auto for the left and right margins.
Here's an example: http://jsbin.com/uyajaw/3/edit (with ugly borders and backgrounds to show where stuff is)
Click the image to resize it and see the caption still centered.
Note that if your caption is likely to be larger than your image, it will probably expand the width of the container div, throwing off the center alignment. You can avoid this by making the setting position: absolute; left: 0; right: 0; on the caption, or by giving it a width that you know will always be smaller than your image.
I don't know if I'm over-thinking this, but here's a way to do it. If you specifically don't want to align the caption with the wrapper div, then you'll need to also account for the imagesLoaded event (jQuery plugin). Otherwise, you will either have an img width of 0 if not loaded, or you'll have the previously loaded img width in there (unless you go back to it).
Take a look at this Fiddle that shows a fixed width wrapper div and the caption centered on it.
I have a form I would like to center directly in the middle of a page. I have this CSS
#form {
width: 240px;
height: 100px
margin: 0 auto;
display: block;
}
this only does it horizontally. Is there a way to do it vertically?
I might be wrong but if I remember correctly.. this should work:
#form {
width: 240px;
height: 100px
position: absolute; /* make sure this is wrapped by an element with "position: relative" */
top: 50%;
left: 50%;
margin: -50px 0 0 -120px; /* half of the height and width */
}
If I'm wrong, then you probably have to use javascript.
Not really - you can declare an offset from the top of the page, but think about it for a moment...how tall is a webpage? What does it mean to be centered vertically?
Do you want to be centered relative to the open browser window height? Or centered relative to the height of the page (top of header to bottom of footer, regardless of browser window size).
On preview, the comments on the original post cover this well.
How can I align a DIV to the center of my page while its position is absolute? If possible without using javascript.
UPDATE: This is an old answer and the answer currently just below this gives a nicer solution which works even if your div has dynamic width. Another alternative, using margin: auto, can be found here, on a different, but related, question.
You can do this if you know the width of the DIV you want to centre.
CSS:
div
{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
}
You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.
position: absolute;
left: 50%;
transform: translateX(-50%);
Try this:
position: absolute;
width: 600px;
left: 50%
margin-left: -300px;
It's not possible to get HTML to automatically center anything that is absolutely positioned. Heck, HTML barely centers anything horizontally using CSS margins :-)
As the name implies absolute positioning is absolute where you get top and left fixed positions and any margins are applied relative to those positions. Auto is ignored with absolute positioning.
There are solutions using JavaScript and jQuery. Here's one that I wrote and use a lot:
jQuery .centerInClient() plugin
Hope this helps.
The meaning of position: absolute is exactly that you want to specify how far from the margins of the page your div should be placed. Since you do not know the width of the screen a priori, there is no way to center it.
I guess you just want to remove the div from the page flow, while keeping it centered. In this case it may be enough to add a container div, like
<div id="external">
<div id="internal">
</div>
</div>
and the CSS
#external {
position: absolute
}
#internal {
margin: 0 auto
}
I did not test the above layout, but I think it should work.
Here's a simple method using percentages:
div {
width: 80%;
position: absolute;
left: 10%;
}
Simply set your desired page width, and set the left margin as half of the remainder. In this case, the width is 80%, leaving 20%. Set left:to 10% and it will center the div on the page.
Using this method will allow the div to scale with different window sizes and screen resolutions as well.