12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

What is the code to center something in HTML?

by moneychain
10 replies
  • WEB DESIGN
    • |
I want to center the widget (code) below. Where do I put the code to center it? Can someone put it in there and hi-lite it so I can see and be able to do it myself next time?

<a class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>
#center #code #html
  • Profile picture of the author PanditaC
    You need to wrap it in a div & give that div a class, like this:

    <div class="center">
    <a class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>
    </div>


    then you need to add the rule to the CSS file as follows:

    div.center {

    width: (whatever the width of the element is);
    margin: 0 auto; /*this is what centers the element*/
    }

    You need to specify a width or it won't center. This is the correct way of doing it using current standards. Now, if you want to add it directly to the html it is as follows .

    <a align="center" class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>


    or....


    <a style="margin: 0 auto; width: 890px;" class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>

    Modify the width in the second example to reflect how wide you need it to be.

    Hope that helps,

    Pandita
    {{ DiscussionBoard.errors[7970167].message }}
  • Profile picture of the author alistair
    I'd normally just do this:

    <div align="center">
    <a class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script>
    </div>
    {{ DiscussionBoard.errors[7970192].message }}
  • Profile picture of the author Robert Michael
    Or you can skip all of the extra nonsense posted above, and use this:

    <center> your widget stuff here </center>

    LOL why do people like to make things harder than they actually are?

    So for your specific example, this would be it centered:

    <center><a class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script></center>
    Signature
    {{ DiscussionBoard.errors[7970227].message }}
    • Profile picture of the author PanditaC
      Originally Posted by Whos That Guru View Post

      Or you can skip all of the extra nonsense posted above, and use this:

      <center> your widget stuff here </center>

      LOL why do people like to make things harder than they actually are?

      So for your specific example, this would be it centered:

      <center><a class="twitter-timeline" href="https://twitter.com/Domainvertize" data-widget-id="305574601449144320">Tweets by @Domainvertize</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs");</script></center>
      The <center> tag is not supported in HTML5, and is deprecated in HTML 4.01. ie. It is not up to current web standards. But yes, it would work. :-)
      {{ DiscussionBoard.errors[7970287].message }}
    • Profile picture of the author Brandon Tanner
      Originally Posted by Whos That Guru View Post

      Or you can skip all of the extra nonsense posted above, and use this:

      <center> your widget stuff here </center>
      That would have been good advice 10+ years ago, but unfortunately it's pretty bad advice for today. The <center> tag has been deprecated for a long time.

      Pandita gave a pretty good solution... the only thing I would add to it is 'text-align: center', to account for older IE browsers.

      HTML Code:
      .center {
width: (whatever the width of the element is);
margin: 0 auto; /*this is what centers the element*/
text-align: center;
}
      Signature

      {{ DiscussionBoard.errors[7970325].message }}
  • Profile picture of the author wlasikiewicz
    To center something in HTML the code is < center> </ center> (remove the spaces)
    Signature
    Build a Profitable & Professional email list.
    {{ DiscussionBoard.errors[7970349].message }}
    • Profile picture of the author Robert Michael
      Originally Posted by PanditaC View Post

      The <center> tag is not supported in HTML5, and is deprecated in HTML 4.01. ie. It is not up to current web standards. But yes, it would work. :-)
      Originally Posted by Brandon Tanner View Post

      That would have been good advice 10+ years ago, but unfortunately it's pretty bad advice for today. The <center> tag has been deprecated for a long time.
      always works fine for me, lol
      Signature
      {{ DiscussionBoard.errors[7970359].message }}
      • Profile picture of the author Brandon Tanner
        Originally Posted by Whos That Guru View Post

        always works fine for me, lol
        Sounds like you haven't tested much deprecated code across a wide range of browsers! If you had, then you would understand why it's best to avoid it (it will work OK in some browsers, but completely fall apart in other browsers).
        Signature

        {{ DiscussionBoard.errors[7971838].message }}
        • Profile picture of the author moralde
          Why is this <center> tag still being forced in this thread? The first 2 replies posted by Pandita and Alistair should have settled the OP's problem.

          Here comes the 'elders' who've been living in caves for the past 12 years or so who wants to flaunt their skills with the <center> tags. LOL!
          {{ DiscussionBoard.errors[7972076].message }}
      • Profile picture of the author BillyW
        Originally Posted by Whos That Guru View Post

        always works fine for me, lol
        I'm sure it does for now, but who knows for how much longer.
        Signature
        Qosso.com - Exceptional Branding At Affordable Prices
        {{ DiscussionBoard.errors[7973544].message }}

Trending Topics