Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can I vertically align an image in a section that extends across the entire web page?
Alignment is the key to determining where to place your elements, such as text and images, buttons, and content boxes. A key component of responsive design is the arrangement of items on your website. This is because the layout and structure of the website will adjust to what you have pre-planned, when it is opened from a device with a smaller screen size, such as a smart phone.
However, this change will have an impact on the spacing between and inside items as well as how they are aligned and positioned. You could see that buttons or forms cannot be clicked or filled out, or that half of your text is missing from the screen if your alignment is incorrect.
In this article, we will discuss about how to align images vertical in a division element. When photos are vertically aligned, they are organized into columns. This is known as vertical alignment of images. The images can be vertically aligned with any text or other images itself. This can be achieved by using some of the CSS properties like CSS grid, CSS flexbox, vertical-align etc.,
Using the vertical-align property of CSS
Vertical-align – The vertical alignment of an element is set using this property of CSS.
Syntax
element{
vertical-align: values;
}
Values can be in following ways −
Length- Uplifts or down lifts the element by a specified length
%- Uplifts or lowers the element
Top, middle, bottom, baseline etc.,
Initial
Inherit
Example
Here, we have aligned the image vertically with the text using the vertical-align property.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Alignment </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: center;
color: #00FF00;
text-decoration: underline;
}
.main {
border: 1px solid black;
height: 70%;
width: 90%;
padding: 15px;
margin-top: 10px;
margin-right: -5px;
border-radius: 5px;
}
.main img {
width: 40%;
height: 8%;
padding: 2px;
border-radius: 7px;
}
span {
padding: 55px;
font-size: 25px;
color: #097969;
vertical-align: 100%;
font-family: Brush Script MT;
font-weight: 900;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1> Vertical Alignment </h1>
<div class= "main">
<img src= "https://www.tutorialspoint.com/images/logo.png" alt= "tutorialspoint">
<span>Welcome to Tutorialspoint </span>
</div>
</body>
</html>
Using CSS Flexbox
Vertically aligning a series of elements can be done by using CSS flexbox as well as CSS Grid.
A CSS Flexbox is a container that includes a number of flex elements. The flex elements can be arranged into rows or columns as necessary. The flex container is the parent element while the flex items are their children.
display:flex permits the developers to style each component to seem appropriate and appealing. It arranges the element's children in rows or columns.
There are various flex container properties. They are mentioned below −
Flex-direction – It is used to indicate the direction the container will stack the flex components. Values – column, column-reverse, row, row-reverse
Flex-wrap – It is used to specify or determine whether the flex items needs to be wrapped or not. Values – wrap, nowrap
Flex-flow – It enables the developers to specify the flex-direction as well as flexwrap together. Values – row wrap, column nowrap etc.,
Align-items – enables to determine the alignment of the flex items
Values – center, flex-start, flex-end, space-around etc.,
Flex-basis – It is used to specify the dimensions of the flex items.
Values – it can be length (cm, px, em) or percent.
Justify-content – It is also used for alignment of the flex items.
Values – center, flex-start, flex-end, space-around etc.,
Flex-shrink – Numbers are accepted as values. If an item has a value of 3, it will shrink three times more than if it had a value of 1.
Order – it designates the order in which flex elements should be aligned.
Example
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of series of images </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 20%;
padding: 25px;
margin: 10px;
border-radius: 5px;
}
.main img {
width: 100px;
height: 110px;
padding: 3px;
border-radius: 7px;
}
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2> Vertical alignment of images using CSS flexbox </h2>
<div class= "main">
<img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
</html>
Using CSS Grid
It is simpler to construct web pages without the use of floats and positioning thanks to the CSS Grid feature, which allows developers to establish a grid-based layout system with rows and columns. The grid-container is the parent element. Display: grid is used to create the element into a grid.
Some of the CSS grid properties are as follows −
Grid-template-columns – It is used to create columns. The values are in length, % etc.,
Grid-template-rows – It is used to create rows. Values are in length, % etc.,
Grid-gap – It is a shorthand property used for both column and row gaps.
Example
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of images using CSS Grid </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 30%;
padding: 15px;
margin: 10px;
border-radius: 5px;
display: grid;
grid-template-rows: 35% 35%;
}
.main img {
width: 150px;
height: 110px;
padding: 2px;
border-radius: 7px;
}
</style>
</head>
<body>
<h2> Vertical alignment of images using CSS Grid </h2>
<div class= "main">
<img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
Conclusion
In this article, we have discussed different methods to vertically align an image in a section that extends across the entire web page.
239 Views
