Skip to main content
F
Fun Seeker
Inspiring
July 25, 2018
Answered

How to properly align an image

  • July 25, 2018
  • 2 replies
  • 1104 views

Hi everybody,

I am struggling to find out how to correctly align an image in a simple paragraph, any help would be appreciated.

I have placed a small image along with text wrapped inside a section tag - see below. The image precedes the text and is set to float right. Looks just fine when viewed on a large screen, but when viewed on a cell phone the image doesn’t reside in the center of the viewport, rather it’s off to the right. What do I need to do so that the image floats to the right but remained centered on smaller screens?

Thanks.

Mark

<section>

<h1></h1>

<img src=“image.jpg” alt="" width=“100” height=“100” class="right" title=""/>

<p>Text</p>

</section>

      Correct answer BenPleysier

      Personally, if I were not using Flexbox as Nancy has suggested, I would use Media Queries to cover the different screen sizes.

      An example using mobile first method::

      <!doctype html>

      <html><head>

        <meta charset="UTF-8">

        <title>Untitled Document</title>

        <style>

          section {

            max-width: 960px;

            margin: auto;

          }

          img {

            display: block;  /* default is inline-block */

            margin: auto;

          }

          @media screen and (min-width: 540px) {

            img {

              display: inline-block; /* change back to default */

              float: right;

            }

          }

        </style>

        </head>

        <body>

          <section>

            <h1>Heading</h1>

            <img src="http://dummyimage.com/400x300" alt="" width="100" height="100" class="right" title="">

            <p>Text</p>

          </section>

        </body></html>

      2 replies

      S
      spriee
      Participant
      July 26, 2018

      Having the image source code, all you now need to do is use the "align" tag to align it anywhere you want .

      Example

      <img src="https://www.spriee.com/wp-content/uploads/2018/07/best-wifi-routers-300x200.jpg" alt="" width="300" height="200" class="alignright" />

      - Where https://www.spriee.com/wp-content/uploads/2018/07/best-wifi-routers-300x200.jpg  is your image source,

      - Alt= image title

      - Width and height = the sie you want your image to be

      - AND class=alighright is the alignement that tells the image to go right or left. You can either choose between alighright, alignleft or aligncenter depending on where you want image to be.

      Hope this helps

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 26, 2018

      spriee  wrote

      Having the image source code, all you now need to do is use the "align" tag to align it anywhere you want .

      Wrong. 

      #1 the ALIGN attribute in HTML is deprecated (obsolete).

      #2 Your "alignright" class does nothing on its own until it is specified somewhere, somehow in the CSS code which you have neglected to specifiy in your example. 

      #3 You're using WordPress, not Dreamweaver.

      Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 25, 2018

      I like to use CSS Flexbox.  It avoids float problems. 

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>CSS Flexbox</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <style>
      .flex-grid {
          display: flex;
          flex-wrap: wrap;
      }
      .col { flex: 1; }
      </style>
      </head>
      <body>
      <section class="flex-grid">
      <div class="col">
      <h3>Heading 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, distinctio, eos. Blanditiis amet aliquid aliquam numquam, saepe quae impedit voluptatibus distinctio ratione enim aspernatur maiores rerum ut sint, sit dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, distinctio, eos. Blanditiis amet aliquid aliquam numquam, saepe quae impedit voluptatibus distinctio ratione enim aspernatur maiores rerum ut sint, sit dolores.</p>
      </div>
      <div class="col"> <img src="http://dummyimage.com/400x300" alt="description"> </div>
      </section>
      </body>
      </html>
      Nancy O'Shea— Product User & Community Expert
      F
      Fun SeekerAuthor
      Inspiring
      July 25, 2018

      Hi Nancy, thanks for responding. Is there no way to get around using Flexbox? The problem only exists when the image is not wrapped with text - meaning the text falls below the image - and the image isn't wide enough to fill the width of the viewport. Under those circumstances, the image hugs the right side and leaves a gap on the left. It looks hideous.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 25, 2018

      There are many ways to skin the proverbial cat.  It really depends on what outcome you're looking for and which devices / browsers you must cater to.    Older Floats and clearing or  CSS Flaxbox or the most modern CSS Grids all have their pros & cons.  

      All About Floats | CSS-Tricks

      A Complete Guide to Flexbox | CSS-Tricks

      CSS Grid Layout

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices