How to Align Something in HTML

PDF download Download Article
A simple and easy guide to use HTML to align obects
PDF download Download Article

Proper coding requires the use of CSS to align things in HTML, but not all websites let you customize the style-sheets so you can properly align the parts of your web page. This wikiHow article covers "inline CSS", helping you align something in HTML so it appears the way you want.

Method 1
Method 1 of 2:

Align Text with HTML

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Align-Something-in-HTML-Step-1-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-1-Version-5.jpg","bigUrl":"\/images\/thumb\/8\/82\/Align-Something-in-HTML-Step-1-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    That means, you need to add "div" inside the "less than" and "greater than" symbols (<>) before the first HTML tag that will have its alignment changed, and add "/div" inside these symbols after the last HTML tag that will have its alignment changed.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Align-Something-in-HTML-Step-2-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-2-Version-5.jpg","bigUrl":"\/images\/thumb\/0\/0f\/Align-Something-in-HTML-Step-2-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/Align-Something-in-HTML-Step-3-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-3-Version-5.jpg","bigUrl":"\/images\/thumb\/e\/eb\/Align-Something-in-HTML-Step-3-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    div style='text-align:left'.
    • If you need to right-align the text, change the "div" tag to "div style='text-align:right'" within the "<>" symbols.
    • If you need center-align the text, change the "div" tag to "div style='text-align:center'" within the "<>" symbols.
    • If you need to justify the text, change the "div" tag to "div style='text-align:justify'" within the "<>" symbols.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7b\/Align-Something-in-HTML-Step-4-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-4-Version-5.jpg","bigUrl":"\/images\/thumb\/7\/7b\/Align-Something-in-HTML-Step-4-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/Align-Something-in-HTML-Step-5-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-5-Version-5.jpg","bigUrl":"\/images\/thumb\/0\/09\/Align-Something-in-HTML-Step-5-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • If it didn't work, then the website has specific coding in its style sheet that overrides your "div". Override the site style-sheet by adding the appropriate version of "style='text-align:right'" inside the opening tag of each element to have its alignment changed. For example, a "p" tag would become "p style='text-align:right'" within the "<>" symbols.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/Align-Something-in-HTML-Step-6-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-6-Version-5.jpg","bigUrl":"\/images\/thumb\/c\/c9\/Align-Something-in-HTML-Step-6-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    7. Advertisement
Method 2
Method 2 of 2:

Align Images with HTML

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/59\/Align-Something-in-HTML-Step-7-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-7-Version-5.jpg","bigUrl":"\/images\/thumb\/5\/59\/Align-Something-in-HTML-Step-7-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a3\/Align-Something-in-HTML-Step-8-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-8-Version-5.jpg","bigUrl":"\/images\/thumb\/a\/a3\/Align-Something-in-HTML-Step-8-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-8-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • If you need the image to hang to the left, add "style='float:left'" to the tag, as in "img style='float:right'" within the "<>" symbols.
    • If you need the image to hang to the right, add "style='float:right'" to the tag, as in "img style='float:right'" within the "<>" symbols.
    • If you need the image to hang in the center, the code gets a bit more complicated. There is not "float:center" property, so you have to add the work-around "style='align:center;text-align:center'" to the tag, as in "img style='align:center;text-align:center'" again within the "<>" symbols.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/Align-Something-in-HTML-Step-9-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-9-Version-5.jpg","bigUrl":"\/images\/thumb\/7\/73\/Align-Something-in-HTML-Step-9-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-9-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ae\/Align-Something-in-HTML-Step-10-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-10-Version-5.jpg","bigUrl":"\/images\/thumb\/a\/ae\/Align-Something-in-HTML-Step-10-Version-5.jpg\/aid1536950-v4-728px-Align-Something-in-HTML-Step-10-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    5. Advertisement

Expert Q&A

Search
Add New Question
  • Question
    What are some good free resources for learning HTML and web development?
    Jessica Andzouana
    Software Engineer
    Jessica Andzouana is a Software Engineer based in the San Francisco Bay Area. With over five years of professional experience in front-end development, digital art, and design, she is passionate about emerging technologies such as blockchain and AI. Her background as both a programmer and artist, paired with a highly design-conscious mindset, provides her a fresh perspective and unique skill set to produce creative solutions in her field. She works at Alcacruz as a Software Engineer, and received a dual BS/BA degree from Santa Clara in Computer Science and Studio Art.
    Jessica Andzouana
    Software Engineer
    Expert Answer
    I will tell you my favorite, what I've used to learn HTML—I really like W3Schools.com and I still use it to this day because it's great for reference on HTML elements, attributes, tutorials, everything you need. Codecademy.com is also an interactive website where you can learn to code—they have tons of tutorials from basic HTML and CSS to advanced stuff like React. I enjoyed Codecademy to get started personally. Scrimba.com combines interactivity with videos, so it's great for students—they have free courses that are really good to get started. And YouTube is helpful if you want tutorials on specific HTML topics too—you can easily search there.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 0 Helpful 0
  • Question
    How do I put text next to images?
    Community Answer
    Simply place the tags after the image link in your code and it should appear next to it. If not, try experimenting with line breaks.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 10 Helpful 5
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • You may have seen the "p align='center'" (within <>) used for changing text alignment. Avoid it as it is out of date, and it's only a matter of time before the major browsers stop supporting it.
        Thanks
      • The instructions for how to align images with HTML also allow you to align sections with HTML. Surround the section with "div" tags, as in the instructions for how to align text with HTML. Add the "float" property to the "div" tags like you do to the "img" tags in the image alignment directions.
        Thanks
      • If the code won't display properly whatsoever, it's possible that the website has a filter in place to strip all such coding from the HTML. However, it's also possible that your code lacks a semicolon, angle bracket, or quotation mark, any of which would keep the code from working. Check for that, particularly if some of the code is applying properly and some isn't.
        Thanks
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Link Within a Page Using HTML
      How to Change Text Color in HTML and CSS
      How to
      Create a Simple Web Page with HTML
      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Insert Spaces in HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Insert Images with HTML
      How to
      Write HTML Code
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Create an Email Link in HTML
      How to
      Resize iFrames in HTML
      Advertisement

      Expert Interview

      Thanks for reading our article! If you’d like to learn more about dealing with html, check out our in-depth interview with Jessica Andzouana .

      References

      1. http://www.w3schools.com/tags/att_p_align.asp
      2. http://www.w3schools.com/tags/att_img_align.asp
      3. http://www.w3schools.com/CSS/css_howto.asp

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 191,478 times.

      Is this article up to date?

      Advertisement