Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Question Is there a css way to center this Twitter button on my blog page?

    I have this javascript code from twitter (tweet button), and Im trying to get it to center in my sidebar. I tried to add a style in there, but it doesn't change anything. The there a css thing i can add to center it?

    Code:
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jeffreydowellphotography.com" style="display:block; vertical-align:middle; padding-left:15px;" data-text="Check out --&gt;" data-via="JDP_911" data-size="large">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    821
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Try:

    Code:
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jeffreydowellphotography.com" style="display:block; width: 300px; height: 30px; margin: 0 auto; vertical-align:middle; padding-left:15px;" data-text="Check out --&gt;" data-via="JDP_911" data-size="large">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    Should center inside its container if you get the width correct. I just picked a height.
    Last edited by Major Payne; 09-16-2013 at 01:06 AM.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    jddowell (09-17-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Question didnt change anything

    I pasted this in with your code, and also various widths, and it never moved the button. The sidebar width is 245.

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    It doesn't work because twitter basically looks for that block of code and replaces it with an iframe. All that CSS you added disappears.

    What you can do is surround that block of code with a div and then style the div (or anything similar). Something like this should work. Play around with it. Lol.

    Code:
    <div class="center">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jeffreydowellphotography.com" style="display:block; vertical-align:middle; padding-left:15px;" data-text="Check out --&gt;" data-via="JDP_911" data-size="large">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    Code:
    .center{
    width:101px;
    margin:0 auto;
    }
    My signature :)

  • Users who have thanked ttkim for this post:

    jddowell (09-16-2013)

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    821
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Quote Originally Posted by jddowell View Post
    I pasted this in with your code, and also various widths, and it never moved the button. The sidebar width is 245.
    Code worked just fine when I checked it in my browser. Whether it moved or not depends on where the code is place and whether the container has a width set. If no width set, then margin: 0 auto; will just center the text link in the browser's viewport window no matter what width.

    I'm not sure idf an Iframe is used as many now are using HTML5. HTML 5 doesn't support attributes such as frameborder, scrolling, marginwidth, and marginheight (which were supported in HTML 4.01). Instead, the HTML 5 specification has introduced the seamless attribute. The seamless attribute allows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    jddowell (09-17-2013)


  •  

    Tags for this Thread

    Posting Permissions

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