next → ← prev

How to align image in Html

If we want to move the image to the different locations on the web page using the Html tag, we have to follow the steps which are given below.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to align an image:

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Align an Image
</Title>
</Head>
<Body> 
Hello User!
This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag.  
<img src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" > 
</Body>
</Html>

Step 2: Now, place the cursor inside the <img> tag of that image which we want to align. And then, we have to use the align attribute of the img tag for specifying the location. So, we have to type the align attribute as same as described in the following block.

<img align="top/left/bottom/middle/right" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="200" height="200" >

Step 3: After specifying the location, we have to save the Html code and then run the file. There are following various Html code which shows the image in the paragraph at the different locations:

1. Middle

This alignment value sets the image in the middle.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Align an Image at middle
</Title>
</Head>
<Body> 
Hello User!
<p>This page helps us to understand how to align an image in Html. 
<img align="middle" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" > 
It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p> 
</Body>
</Html>

The output of above Html code is shown in the following Screenshot:

How to align image in Html

2. Top

This alignment value sets the image at the top.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Align an Image at Top
</Title>
</Head>
<Body> 
Hello User!
<p>This page helps us to understand how to align an image in Html. 
<img align="Top" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" > 
It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p> 
</Body>
</Html>

The output of above Html code is shown in the following Screenshot:

How to align image in Html

3. Bottom

This alignment value sets the image at the bottom.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Align an Image at bottom
</Title>
</Head>
<Body> 
Hello User!
<p>This page helps us to understand how to align an image in Html. 
<img align="bottom" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" > 
It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p> 
</Body>
</Html>

The output of above Html code is shown in the following Screenshot:

How to align image in Html

4. Left

This alignment value sets the image at the left.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Align an Image at left
</Title>
</Head>
<Body> 
Hello User!
<p>This page helps us to understand how to align an image in Html. 
<img align="left" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" > 
It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p> 
</Body>
</Html>

The output of above Html code is shown in the following Screenshot:

How to align image in Html

5. Right

This alignment value sets the image at the right.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Align an Image at Right
</Title>
</Head>
<Body> 
Hello User!
<p>This page helps us to understand how to align an image in Html. 
<img align="right" src="https://image3.mouthshut.com/images/ImagesR/imageuser_m/2017/11/925747536-4559193-1.png?rnd=38062" width="100" height="100" > 
It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p> 
</Body>
</Html>

The output of above Html code is shown in the following Screenshot:

How to align image in Html

Next TopicHow to add Video in Html

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk tutorial

Splunk

SPSS

Swagger tutorial

Swagger

Transact-SQL

Tumblr tutorial

Tumblr

ReactJS

Regex

Reinforcement learning tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS

React Native tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras

Preparation

Aptitude

Logical Reasoning

Reasoning

Verbal Ability

Interview Questions

Company Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

Artificial Intelligence

AWS

Selenium tutorial

Selenium

Cloud Computing

Cloud Computing

Hadoop tutorial

Hadoop

ReactJS Tutorial

ReactJS

Data Science Tutorial

Data Science

Angular 7 Tutorial

Angular 7

Blockchain Tutorial

Blockchain

Git

Machine Learning Tutorial

Machine Learning

DevOps Tutorial

DevOps

B.Tech / MCA

DBMS

Data Structures tutorial

Data Structures

DAA

Operating System

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering

Software Engineering

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

Automata

C Language tutorial

C Programming

C++

Java

.Net Framework tutorial

.Net

Python tutorial

Python

List of Programs

Programs

Control Systems tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}

Subscribe to Get Email Alerts

YouTube