www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: [RESOLVED] Help with centering buttons?

  1. #1
    Join Date
    Dec 2017
    Posts
    11

    resolved [RESOLVED] Help with centering buttons?

    Hello, I am very new and trying to learn to use an existing site with no help. I've been doing pretty well but running into, what is probably easy for you but very frustrating for me, road blocks. I really want to learn and have been searching for answers but none of them seem to work for this.

    The latest is that I want to make 2 buttons on the same line appear side-by-side and centered in the middle of the page. Below is the actual code from the site. You can view the site to see how this is looking now.

    <h3 class="summer"><strong>BISBEE POOL LEAGUE 17 - 18</strong></h3>
    <p style="text-align: center;"><a class="leaguebutton"
    href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-
    standings/">Standings</a><a class="leaguebutton"
    href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-
    schedule/">Schedule</a></p>

    Can you explain what I need to do? Thankx.................Pitt

  2. #2
    Join Date
    Dec 2012
    Posts
    1,609
    You can view the site to see how this is looking now.
    Where is the link?
    Centering is easy when using flex layout:
    Apply this CSS to the wrapping p-element:
    Code:
    <p class="wr-btn">
    CSS:
    Code:
    p.wr-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    However, if the buttons should be centered in the middle of the page you need to make the page fill the height of the viewport, e. g. like this:
    Code:
    <body>
    <h3 class="summer"><strong>BISBEE POOL LEAGUE 17 - 18</strong></h3>
    <p style="text-align: center;"><a class="leaguebutton" 
    href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-
    standings/">Standings</a><a class="leaguebutton" 
    href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-
    schedule/">Schedule</a></p>
    </body>
    CSS:
    Code:
    body {
        height: 100vh;
    }
    p.wr-btn {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

  3. #3
    Join Date
    Dec 2017
    Posts
    11
    The site is http://cochisebilliards.com and the first page shows how it looks right now. You will see 2 buttons (the code lines I sent you) are on each side. Below it is where the buttons are above each other. I want them on the same line, side-by-side but centered on the page.

    I'm going to try what you have given me above and see where I go with it. Thankx.............Pitt

  4. #4
    Join Date
    Dec 2012
    Posts
    1,609
    Thanks for the link, now I understand things better. In order to align the buttons side by side and centered you need to:
    - forget about what I posted before
    - apply text-align:center to the wrapping p-element
    - remove all floats
    - apply display:inline-block to the buttons (currently they have display:block)
    Last edited by Sempervivum; 12-10-2017 at 06:45 PM.

  5. #5
    Join Date
    Dec 2017
    Posts
    11
    Did all that and it still puts them on the left, not the middle. This reply box won't let me paste in the line code without an error. How do you post your replies with the blue box?

  6. #6
    Join Date
    Dec 2017
    Posts
    11
    Here's the code now:

    <h3 class="summer"><strong>BISBEE POOL LEAGUE 17 - 18</strong></h3>
    <a class="leaguebutton" style="text-align:center; width: 150px; display:inline-block; "href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-standings/">Standings<a class="leaguebutton" style="text-align:center; width: 150px; display:inline-block; "href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-schedule/">Schedule</a></p>

  7. #7
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,931
    I'm not exactly sure this is what you want, but it is my best guess.

    Code:
    <!DOCTYPE html>
    <meta charset="UTF-8" />
    <html lang="en">
    <head>
    <title> League Information </title>
    <style>
     .summer { font-weight: bold; text-align: center; }
     .leaguebutton { background-color: lime; text-align: center; text-decoration: none; 
                     display: inline-block; border: 1px solid black; padding: 5px; }
    </style>
    </head>
    <body>
    <h3 class="summer">BISBEE POOL LEAGUE 17 - 18<br>
    <a class="leaguebutton" href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-standings/">Standings</a>
    <a class="leaguebutton" href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-schedule/">Schedule</a>
    </h3>
    </body>
    </html>
    Note: You should enclose your code between [ code] and [ /code] tags (without the spaces)
    to make it easier to read, copy, test your code. It also retains the formatting.

    BTW, welcome to the forums.

  8. #8
    Join Date
    Dec 2017
    Posts
    11
    Thank you very much, I will try this right away.............Pitt

  9. #9
    Join Date
    Dec 2017
    Posts
    11
    Note: You should enclose your code between [ code] and [ /code] tags (without the spaces)
    to make it easier to read, copy, test your code. It also retains the formatting.
    OK, I just figured out what you mean with the code tags. I'll use them in the future.......Thankx again.........Pitt

  10. #10
    Join Date
    Dec 2012
    Posts
    1,609
    Your CSS is still unchanged. When I apply the changes I described by use of the developer tools everything is fine:
    align-buttons.png

  11. #11
    Join Date
    Dec 2017
    Posts
    11
    OK, I went into the CSS and made the changes as I see them in your attachment but I have a couple of questions. The last line you have a line through is "webkit border radius: 5px;" do I need to also delete the items below that for the a.leaguebutton? Also, the item above that "element.style", where is this one? It's not in the CSS that I can see? I removed those items from the code and here is how it looks now:

    Code:
    <h3 class="summer"><span style="color: #ff0000; font-size: 17px"><strong>WEDNESDAY</span> BISBEE POOL LEAGUE 17-18</strong></h3>
    <a class="leaguebutton" 
    href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-standings/">Standings
    <a class="leaguebutton" 
    href="http://cochisebilliards.com/leagues/bisbee-pool-league/bisbee-schedule/">Schedule</a>
    so now it should be relying on the CSS code for the "leaguebutton" only?

    Thankx again, I'm learning a lot from this one issue.................Pitt

  12. #12
    Join Date
    Dec 2012
    Posts
    1,609
    The last line you have a line through is "webkit border radius: 5px;" do I need to also delete the items below that for the a.leaguebutton?
    No, the prefix "webkit" indicates that this is a browser specific definition and my browser (Opera) has deactivated it as it's not applicable. You can leave this as is.

    now it should be relying on the CSS code for the "leaguebutton" only?
    I recommend to do so. Inline styling is possible too but to keep things clear both should not be mixed. Nowadays it's widely considered to be best practice to do without inline styling.

    Also, the item above that "element.style", where is this one?
    "element.style" displays the inline styling as can be seen in the window above.

  13. #13
    Join Date
    Dec 2012
    Posts
    1,609
    PS: Viewed your site again and the buttons are arranged side by side now. To make them centered simply apply "text-align:center" to the wrapping p-tags.
    Last edited by Sempervivum; 12-11-2017 at 03:45 AM.

  14. #14
    Join Date
    Dec 2017
    Posts
    11
    Hey Sempervivum, I can't get any Reply to go through, this is a short test. Pit

  15. #15
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,931
    Did you view and run post #7?
    Any questions or comments?

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.39310 seconds
  • Memory Usage 3,010KB
  • Queries Executed 16 (?)
More Information
Template Usage (37):
  • (1)SHOWTHREAD
  • (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
  • (6)bbcode_code
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)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 (73):
  • 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
  • fetch_postattach_query
  • 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
  • pagenav_page
  • pagenav_complete
  • 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