logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-18-2012, 10:39 AM   #1
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default need to center div within div or h1

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/cent...-horizontally/
a working consistent cross-browsersolution for ie6 and up browsers appreciated,or maybe ie8 and up.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 07-18-2012, 06:23 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

just text-align: center works for me

??
domedia is offline   Reply With Quote
Old 07-19-2012, 06:36 AM   #3
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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

Code:
.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
Code:
    .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?
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 07-19-2012, 07:10 AM   #4
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

I was also thinking of
Code:
        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.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 08-03-2012, 08:15 AM   #5
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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

Code:
margin-left:auto;
margin-right:auto;
width:500px;
you have to specify a fixed width.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 08-03-2012, 10:27 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

http://css-tricks.com/centering-in-the-unknown/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 08-19-2012, 07:29 AM   #7
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Old 08-19-2012, 08:36 AM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 08-27-2012, 02:30 PM   #9
worrall
 
Join Date: Aug 2012
Posts: 7
Default

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.
worrall is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:48 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com