What is the code to center something in HTML?

by 10 replies
12
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>
#website design #center #code #html
  • You need to wrap it in a div & give that div a class, like this:


    <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>



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


    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 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 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
  • I'd normally just do this:


    <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>
  • 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>
    • [2] replies
    • 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. :-)
    • 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;
}
  • To center something in HTML the code is < center> </ center> (remove the spaces)
    • [1] reply
Join the discussion

Next Topics on Trending Feed

  • 12

    What is the code to center something in HTML?

    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>