Highlighted

How to properly align an image

Explorer ,
Jul 25, 2018

Copy link to clipboard

Copied

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>

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

246

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to properly align an image

Explorer ,
Jul 25, 2018

Copy link to clipboard

Copied

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>

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

247

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 25, 2018 0
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 25, 2018 1
Explorer ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 25, 2018 0
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 25, 2018 1
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 25, 2018 1
Community Beginner ,
Jul 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 25, 2018 1
Adobe Community Professional ,
Jul 26, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2018 1