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>
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 bac
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>
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.
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.
A Complete Guide to Flexbox | CSS-Tricks
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>
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
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.