Image alignment
In this article we are going to learn about image alignment, float left, float right and align center in css, how to align images in html.
We learnt about css in general, word spacing in css, text transform in css, text decoration in css, background image in css, background image repeat in css, background position in css, image style in css, image style in css and rgba in css so, we will be focusing on alignment of images.
Image alignment
Image aligning is a way of positioning or placing images in html elements using just css properties.
Let us create a paragraph element with the image floated left, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-align-example {
float: left;
width: 20%;
}
<style/>
</head>
<body>
<p>
This is a paragraph element with the image floated left.<img class="img-align-example" src="images/icon.png" alt="scienceinlesotho icon">
</p>
</body>
</html>
So, we should have the following results.
This is a paragraph element with the image floated left.
Let us create a paragraph element with the image floated right, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-align-example {
float: right;
width: 20%;
}
<style/>
</head>
<body>
<p>
This is a paragraph element with the image floated right.<img class="img-align-example" src="images/icon.png" alt="scienceinlesotho icon">
</p>
</body>
</html>
So, we should have the following results.
This is a paragraph element with the image floated right.
Let us create a paragraph element with two images floated left and right, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-align-example1 {
float: left;
width: 20%;
}
.img-align-example2 {
float: right;
width: 20%;
}
<style/>
</head>
<body>
<p>
This is a paragraph element with two images floated left and right.<img class="img-align-example1" src="images/icon.png" alt="scienceinlesotho icon">
<img class="img-align-example2" src="images/icon.png" alt="scienceinlesotho icon">
</p>
</body>
</html>
So, we should have the following results.
This is a paragraph element with two images floated left and right.
Let us create a paragraph element with the image aligned center, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-align-example {
display: block;
margin: 0px auto;
width: 20%;
}
<style/>
</head>
<body>
<p>
This is a paragraph element with the image aligned center.<img class="img-align-example" src="images/icon.png" alt="scienceinlesotho icon">
</p>
</body>
</html>
So, we should have the following results.
This is a paragraph element with the image aligned center.