Results 1 to 10 of 10

Thread: Centering a page: text-align:center or absolute?

  1. #1
    Join Date
    Dec 2002

    Centering a page: text-align:center or absolute?

    I don't really understand how it works.
    Do you just put

    or have an absolute positioning, then manually find the right position to have the page centered?

    If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?

    For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

  2. #2
    Join Date
    Dec 2002
    Pleasanton, CA
    A <div> has, by default, a width of 100%. "text-align:center" will center text within that div.

    If you want to center a fixed width div use..
    <div style="margin:0 auto; width:600px;">

  3. #3
    Join Date
    Dec 2002
    So, I will put that line for DIVs that are supposed to be centered (banner, bottom bar...), but for the other DIVs (picture, text...) use absolute positioning?

  4. #4
    Join Date
    Apr 2005
    Bathurst, NSW, Australia
    There are already heaps of posts on this topic in this forum, do a search.
    Don't use absolute positioning to align an element in the body to the centre, if you looked at it in a smaller or larger res it won't be in the centre.
    What most people do it have a container centred in the middle of the page, then have everything aligned left inside this container div.
    Then if you want anything inside this to align centre make an extra class and have this align centre and it will align centre in the container div, therefore in the centre of the page.

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css"><!--
    body {
    text-align: center;
    #container {
    width: 600px;
    margin: 0 auto;
    text-align: left;
    .ad {
    text-align: center;
    <div id="container">
    <div class="ad">
    <img src="blah.gif" width="350px" height="100px" alt="blah" /></div>
    </div><!--End Container-->

  5. #5
    Join Date
    Dec 2002
    Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?

  6. #6
    Join Date
    Aug 2004
    Quote Originally Posted by hitman
    Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?
    Hard to say for sure without a good visual idea of what you want, but from the description I'd guess that either you'd use relative positioning or perhaps just tweaking the margins or padding of the element you want positioned.
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  7. #7
    Join Date
    Dec 2002
    But even if I tweak your margin or padding, the image won't be on top of the first one... I'm getting more confusing...
    If you have a look at the website I did, which is my first website in CSS, there's the 'latest news' image. Then, on top of it, there's another DIV for the text, then another DIV for the blue cylindric images, and finally a DIV for the 'Read more''s. The four DIVs are using absolute positioning.

    I know it's all messy, but that's the only way I know for the moment.

    So, How would this same positioning be presented with another CSS method?

  8. #8
    Join Date
    Jun 2003
    commonly we use percentages, or alternativly using relative poitions and the text-align properties.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  9. #9
    Join Date
    Dec 2002
    Pleasanton, CA
    Try something like this..
    <style type="text/css">
    #news {
      margin:20px 10px; padding:0px; width:250px; height:200px;
      background:#fff url(images/bkgnd.gif) xx yy no-repeat);
      /* use xx and yy to position the background image within the div */
    #news p {
      margin:0px; padding:5px 10px;  /* adjust paragraph spacing */
    <div id="news">
      <img src="images/latestnews">
      <p>&nbsp;<img src="images/readmore.gif" style="float:right"></p>
      <p>&nbsp;<img src="images/readmore.gif" style="float:right"></p>
      <p>&nbsp;<img src="images/readmore.gif" style="float:right"></p>

  10. #10
    Join Date
    Dec 2002
    Thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.18273 seconds
  • Memory Usage 2,938KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (10)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates