none
Center Div content RRS feed

  • Question

  • I have some centent that is in a DIV left aligned on my webpage.  The content is a script that I got from the internet that adds some social network links: 

    <!-- Lockerz Share BEGIN -->
       <div class="a2a_kit a2a_default_style">
         <a class="a2a_dd" href="Sharehttp://www.addtoany.com/share_save">Share</a>
         <span class="a2a_divider"></span>
         <a class="a2a_button_facebook"></a>
         <a class="a2a_button_twitter"></a>
         <a class="a2a_button_linkedin"></a>
         <a class="a2a_button_google_bookmarks"></a>
         <a class="a2a_button_email"></a>
       </div>
       <script type="text/javascript" src="</script">http://static.addtoany.com/menu/page.js"></script>
    <!-- Lockerz Share END -->

    This illustrates how links appear now in the website: http://gregmaxey.mvps.org/word_tips.html

    I would like to center the Div content in my web pages under the page title.  I added a style to my style sheet that I thought should do this, but it has no affect:

    #a2a_kit a2a_default_style {
    margin-left:auto;
    margin-right:auto;
    }

    It has been awhile since I've done much with styles so hopefully whatever I am missing will be obvious to you experts.  Thank you.


     
     


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm

    Thursday, September 13, 2012 10:05 PM

All replies

  • You need 3 things to center a container on a website:

      • A valid doctype
      • A defined width less than 100%
      • CSS margin with left and right defined as auto.

    It looks like you don't have #2. I haven't looked at the page but I'm presuming that you have #1 since the page was created in Expression Web which puts a valid doctype in by default.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com

    Thursday, September 13, 2012 10:07 PM
  • Cheryl,

    Nothing I define in the style seems to have any effect.  The DocType of the page is:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    I changed the style to this:

    #a2a_kit a2a_default_style {
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    }

    Nothing.  The div is still left aligned and 980px wide.

    Thanks


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm

    Thursday, September 13, 2012 10:30 PM
  • You have a naming problem. First, you are trying to assign the div a class, but you defined the style as an id. Change the "#" to a "." in your CSS and that problem is solved. However, the space in the style name seems to be confusing things too. I got Firefox to display the content centered by putting a comma in the name after "kit", but that seems like a clunky workaround. Why not just give it a simple name without the space and all the underscores?

    Jim


    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

    Thursday, September 13, 2012 11:41 PM
  • Jim,

    No joy :-(

    I changed to this:

    .a2a_kit a2a_default_style {
     width: 960px;
     margin-left:auto;
     margin-right:auto;
     }

    And the darned thing is still left aligned.  I didn't choose the name (or the space and underscores). The whole block of code is the code I grabbed from the the Lockerz site.  I had previously tried to rename it.  However when I do, even to change the space after kit to a comma, I lose all the icons and only the "Share" links displays on the published webpage.

    Here it is published.  The first is forced into the center area of the page using a table :-(.  The second (left aligned) is just the code with the style applied.   

    http://gregmaxey.mvps.org/word_tips.html

    Note if I change the class name to .a2a_kit,a2a_default_style as you suggested, the only thing that displays on the published page is "Submit (no leading or trailing icons).

    Thanks.

     


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm

    Friday, September 14, 2012 12:51 AM
  • Why not try what he said? Get rid of the space. Give it a simple name.


    ClarkNK, A.K.A. HomePage Doctor
    HomePageDoctor.com -- Expression Web database tutorials
    Ownertrades.com -- Created with Expression, VWDExress, SQL Express, and ASP.NET
    Arvixe -- My favored web host

    Friday, September 14, 2012 2:47 AM
  • What part of this statement is not clear:

    I had previously tried to rename it.  However when I do, even to change the space after kit to a comma, I lose all the icons and only the "Share" links displays on the published webpage.

    If you look a the following webpage;

    http://gregmaxey.mvps.org/word_tips.html

    The the link "Share" and collection of icons is displayed correctly in the center of the page.  It is forced there by using a table.  The name of div class is "a2a_kit a2a_default_style"

    Below and to the left of that link and collection of icons you will see another link "Share" (note none of the icons are display).  That is what happens when I rename the class.  The style seems to have no infuence whatsover over the layout/presentation of the displayed result and renaming the class destroys the display of the icon collection.

     .SimpleName {
     width: 960px;
     margin-left:auto;
     margin-right:auto;
     }

    <!-- Lockerz Share BEGIN -->
         <div class="SimplyName">
           <a class="a2a_dd" href="Sharehttp://www.addtoany.com/share_save">Share</a>
           <span class="a2a_divider"></span>
           <a class="a2a_button_facebook"></a>
           <a class="a2a_button_twitter"></a>
           <a class="a2a_button_linkedin"></a>
           <a class="a2a_button_google_bookmarks"></a>
           <a class="a2a_button_email"></a>
         </div>
         <script type="text/javascript" src="</script">http://static.addtoany.com/menu/page.js"></script>
         <!-- Lockerz Share END -->


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm

    Friday, September 14, 2012 3:10 AM
  • First, there iis no styling defined for SimplyName, either in your page or in your published CSS.

    None of the links in div SimplyName have href's, just classes assigned.  The links in the table have href's to the buttons.  The links are generated by the javascript you are referencing, and it is using the div and link class names to do it.  You would need to download the script, us a local copy, and know how to edit it to change the names it uses (and it uses the class names split into sections).   In this case, don't change the names.

    • Edited by KathyW2 Friday, September 14, 2012 3:57 AM
    Friday, September 14, 2012 3:38 AM
  • After all the things you have tried, the state of the site appears to be indeterminate at this time. When I visit it, the "Share" appears twice, once centered, and again, on the next line, aligned left. No icons at all, left-aligned or otherwise. Can you possibly put it back in the state it was in when you had the "Share" and all the icons, but aligned left?

    As for your attempts so far to assign styles to that div, they have been doomed by your failure to recognize what was actually assigned to that div. (Actually, I'm surprised that no one else has seen it either.) Here is the declaration

    <div class="a2a_kit a2a_default_style">

    That does not mean that the div is assigned class "a2a_kit a2a_default_style". It means that the div is assigned both class "a2a_kit" and class "a2a_default_style". So, when you used the selector "a2a_kit a2a_default_style", you were saying 'Find an element with class "a2a_default_style" contained within an element with class "a2a_kit",' and, of course, no such element exists.

    Since it is unknown what other elements may be assigned either of those classes (so what other elements might be affected), my suggestion would be to simply assign an id to that div, then use that as your selector, so

    <div id = "socialCentered" class="a2a_kit a2a_default_style">

    then in your CSS

    #socialCentered {
     width: 960px;
     margin:0 auto;
     }

    That should get you sorted.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Friday, September 14, 2012 3:42 AM
    Friday, September 14, 2012 3:41 AM
  • Scott,

    That didn't work. Using this code:

    <!-- Lockerz Share BEGIN -->
         <div id = "socialCentered" class="a2a_kit a2a_default_style">
           <a class="a2a_dd" href="Sharehttp://www.addtoany.com/share_save">Share</a>
           <span class="a2a_divider"></span>
           <a class="a2a_button_facebook"></a>
           <a class="a2a_button_twitter"></a>
           <a class="a2a_button_linkedin"></a>
           <a class="a2a_button_google_bookmarks"></a>
           <a class="a2a_button_email"></a>
         </div>
         <script type="text/javascript" src="</script">http://static.addtoany.com/menu/page.js"></script>
         <!-- Lockerz Share END -->

    and:

    #socialCentered {
    width: 960px;
    margin:0 auto;
    }

    In the style sheet, the "Share" link and icons still appears left aligned on the page.

    However, I have now managed to get it center (without resorting to a table) using:

    .a2a_default_style {
      width: 200px;
      margin-left:auto;
      margin-right:auto;
      }

    In IE9 or Firefox, the "Share" link and icons are now centered under the heading.

    http://gregmaxey.mvps.org/word_tips.html

    Thank you all very much.


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm

    Friday, September 14, 2012 4:13 AM