I'm trying to horizontally and vertically center a header on top of an image. So far I've got the vertical centering down (which is the reason for the relative and absolute positioning). However, the horizontal centering is giving me problems now: margin:0 auto; doesn't work, left:50%; doesn't work and text-align:center doesn't work. Does anyone know how to horizontally center the header on top of the image?
Details:
I don't know the height or width of any of the elements, so I can't use fixed heights or widths
Setting the image as a background is not an option because the image is part of the content
Not all headers will be a similar length, so I have to find a dynamic solution (they will all be one line though, I'll cut them off with an ellipsis)
HTML
<article>
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</article>
CSS
article {
position: relative;
}
h2 {
line-height: 0;
position: absolute;
top: 50%;
left: 0;
margin: 0;
padding: 0;
}
It's here: http://jsfiddle.net/kmjRu/21/
You can set the article to display: inline-block and width: auto, then center the h2:
http://jsfiddle.net/kmjRu/28/
Related
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 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
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
I have a pop up which contains an ASP.NET form, click the link "Request Information" and the form appears.
However, the pages that have the link "Request Information" to trigger the pop up have a lot of content therefore scrolling is required to see the link.
I need to have the div always centered if a user scrolls to read the content, otherwise if they don't scroll the pop up still appears centered on screen.
The div is positioned absolutely, the whole page width is 960px with margin set to 0 auto.
If the div has an fixed width and height use:
(if width=120px and height=80px)
position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */
If your popup div has a fixed size then you can use this CSS:
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* this requires a fixed size */
Otherwise you have to fiddle around with display: table-cell; and the like.
Is this what you're trying to do? http://jsfiddle.net/Hrwf8/
The key here is to set the left and top styles to 50% and set the margin-left and top to the negative amount of half of the width and height of the div. This of course requires that you have a fixed size for your div.
Use a position:fixed; for this, use 0 for top, left, right and bottom, and give the div a display:table-cell; also, like this, setting text-align:center; and vertical-align:middle; will make everything inside appear exactly in the middle, without pixel-exact hacks like negative margins.
In your CSS:
.ClassCenter {
position: absolute;
left: 50%;
top: 50%;
}
Source:
http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html
I have a header div, fixed position at the top of the page.
Inside it are some divs floated left and some divs floated right, all with links. I have another div that I want to be centered on the page, vertically positioned between them.
Diagram:
DivA DivB PageCenteredDiv DivC DivD DivE
I have the page centered div working great:
width: 100%;
text-align: center;
position: fixed;
top: 0;
left: 0;
But, no matter what I do with z-index on any of the divs, the links in the floated divs are below the centered div and cannot be clicked.
Is there any way to get those floating divs above the other div?
Any help would be appreciated!
If you can set a width on the centered div:
left: 50%;
margin-left: -150px;
position: absolute;
text-align: center;
top: 0;
width: 300px;
This would make the 300px-wide div centered inside the header, while keeping it from overlapping onto the floated divs on the sides. You can obviously choose the width according to the contents.
Edit: I've cooked up a quick demo on JSFiddle so you can see it working: http://jsfiddle.net/MartinodF/2gXKP/
I have a small problem but I can't get it solved.
I have a content header of 864px width, a background image repeated-y and footer image.
Now I have this <div> over the background image and I want it to be like 855px width and the text align left but yet aligned center so it fits in the bg.
I once had it oke width some padding left but I figured out that was the correct padding for my screen resolution.
Soo briefly it is:
Setting a div width - align the div center - align its text (content) left.
Set auto margins on the inner div:
<div id="header" style="width:864px;">
<div id="centered" style="margin: 0 auto; width:855px;"></div>
</div>
Alternatively, text align center the parent, and force text align left on the inner div:
<div id="header" style="width:864px;text-align: center;">
<div id="centered" style="text-align: left; width:855px;"></div>
</div>
Try:
#your_div_id {
width: 855px;
margin:0 auto;
text-align: center;
}
Use auto margins.
div {
margin-left: auto;
margin-right: auto;
width: NNNpx;
/* NOTE: Only works for non-floated block elements */
display: block;
float: none;
}
Further reading at SimpleBits CSS Centering 101
All of these answers should suffice.
However if you don't have a defined width, auto margins will not work.
I have found this nifty little trick to centre some of the more stubborn elements (Particularly images).
.div {
position: absolute;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}