How to properly align an image

Report · Jul 25, 2018

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>

Report · Jul 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 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.

Report · Jul 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 25, 2018

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>

Wappler, the only real Dreamweaver alternative.

Report · Jul 25, 2018

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

Example

- 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

Report · Jul 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

How to properly align an image

1 Correct answer