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. 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. Advertisement
  3. 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.
    • 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.
  4. Advertisement
Method 2
Method 2 of 2:

Align Images with HTML

PDF download Download Article
    • 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.
  1. 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.
    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.
  • 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.
Ask a Question
      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.
      • 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.
      • 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.
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Thanks for submitting a tip for review!
      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 .

      About This Article

      Thanks to all authors for creating a page that has been read 194,516 times.

      Is this article up to date?

      Advertisement