PDA

View Full Version : need to center div within div or h1


jmichae3
07-18-2012, 10:39 AM
I need to center either a div or p within a div or h1.
I see all kinds of content on the web.
and it worked on firefox 13.0.1,
once.
I need a solution that works every time.
currently I am using
http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/


a working consistent cross-browsersolution for ie6 and up browsers appreciated,or maybe ie8 and up.

domedia
07-18-2012, 06:23 PM
just text-align: center works for me

??

jmichae3
07-19-2012, 06:36 AM
that's not working due to the fact that
- the inside div is float:left to prevent it from consuming the entire page width (I know of no other way to do this, span simply makes my text look look like oversized overlapped awful junk)
- these elements typically consume the entire width of the page anyway. preventing that and still centing the thing is a problem. no such thing as float:center;
- the inside box is centered text, not left-aligned, as most examples require. maybe I should wrap another div or span? ugh.

I would like to try something like


.maintitlebarwrapper {
/*left:calc(0px - attr('#maintitlebar:width', 'length')/2);*/ /*draft not implemented by ff yet */
left:attr('#maintitlebar:width', 'length');
}
.maintitlebar {
....

<div id="maintitlebarwrapper" class="maintitlebarwrapper">
<div id="maintitlebar" class="maintitlebar">
blah
</div>
</div>


I am trying to position maintitlebar which has unknown width (but usually less than page width) at the center of the maintitlebarwrapper.

text-align:center; I have read only applies to the text within the div, not the div. same goes with align=center, so I struck out with both of those (tried those first).

I get fairly good results with

.maintitlebarwrapper {
margin-left:auto;
margin-right:auto;
width:500px;
}

however, the horizontal positioning is not perfect - IF a user with bad eyesight happens to zoom his browser and blow up the fonts, this trick is toast.


does anyone have any experience using css attr()? is it even implemented on ff13? does anyone know if calc() works on any other browsers?

jmichae3
07-19-2012, 07:10 AM
I was also thinking of left:calc(50% - attr('width') / 2); /*draft not implemented by ff yet */

but it doesn't work in ff, probably works in webkit, saw some bug reports about attr and calc.

jmichae3
08-03-2012, 08:15 AM
it turns out that currently due to browser implementation bugs in firefox and some others, the only way to center a div within a div currently is to use

margin-left:auto;
margin-right:auto;
width:500px;

you have to specify a fixed width. :-(

gentleone
08-03-2012, 10:27 PM
http://css-tricks.com/centering-in-the-unknown/

jmichae3
08-19-2012, 07:29 AM
the last trick on that page works, but only if float is not used. the table trick does not work with divs as content.

thank you. it turns out the calc() css function IS implemtned (I just didn't put in the browser-specific -o- or -ms- or -khtml- or -wap- or -atsc- or -webkit- or -moz- prefixes in addition to just the regular calc().

blah - I don't like the way browser mfr's do this - it makes our web pages bloated when we make things "compatible".
calc() cannot be used yet because attr() function is not available yet to my knowledge. ouch.

gentleone
08-19-2012, 08:36 AM
calc() and attr() are too experimental to implement and thus to rely on. The browser vendors are still ironing out the many bugs and issues and as far as I know is calc() the one they are aiming for... attr() doesn't get so much attention from the community, but calc() does.

http://caniuse.com/#feat=calc

worrall
08-27-2012, 02:30 PM
I frequently use text-align:center in my code because it is so simple to use as the Administrator said. If you want something extra then you go through the css code which gives lots of variety of display.