How to vertically align an image in a section that extends across the entire web page?-CSS Tutorial-php.cn

How to vertically align an image in a section that extends across the entire web page?

WBOY

Release： 2023-09-06 17:09:03

forward

755 people have browsed it

How to vertically align an image in a section that extends across the entire web page?

Alignment is key in determining where elements such as text and images, buttons, and content boxes are placed. A key component of responsive design is the arrangement of items on your website. This is because when a website is opened from a device with a smaller screen size, such as a smartphone, the layout and structure of the website will adapt to what you have planned in advance.

However, this change will have an impact on the spacing between and within items, as well as how they are aligned and positioned. You may find that you can't click or fill out a button or form, or that half the text is missing from the screen if it's not aligned correctly.

In this article, we will discuss how to vertically align images in split elements. When photos are aligned vertically, they are organized into columns. This is called the vertical alignment of the image. The image can be vertically aligned with any text or other images themselves. This can be achieved by using some CSS properties, such as CSS grid, CSS flexbox, vertical-align, etc.,

Use CSS vertical-align attribute

Vertical-align – Use this property of CSS to set the vertical alignment of an element.

grammar

element{
   vertical-align: values;
}

Copy after login

Values can be in the following ways -

Length - Promote the element up or down by the specified length
%-Raise or lower an element
Top, middle, bottom, baseline, etc.,
initial
inherent

Example

Here we use the vertical-align property to vertically align the image with the text.

<!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>

Copy after login

Using CSS Flexbox

You can use CSS flexbox and CSS Grid to vertically align a series of elements.

CSS Flexbox is a container that contains many Flex elements. Flexible elements can be arranged in rows or columns as desired. Flex containers are parent elements, and Flex items are their children.

display:flex Allows developers to style each component so that it looks appropriate and attractive. It arranges the child elements of an element in rows or columns.

Flex containers have various properties. They are mentioned below -

Flex-direction – Used to indicate the direction in which the container stacks Flex components. Values – Column, Column Reverse, Row, Row Reverse
Flex-wrap – Used to specify or determine whether a Flex project requires wrapping. Value – newline, newline now
Flex-flow – It enables developers to specify both flex-direction and flexwrap. Value – row wrap, column wrap, etc.,
Align-items – Ability to determine the alignment of flex items
Values – center, flex-start, flex-end, space-around, etc.,
Flex-basis – Used to specify the dimensions of a flex item.
Value - Can be length (cm, px, em) or percentage.
Justify-content – It is also used for alignment of flex items.
Values – center, flex-start, flex-end, space-around, etc.,
Flex-shrink – Accepts a number as value. If an item has a value of 3, it shrinks three times as much as if it had a value of 1.
Order - It specifies the alignment order of Flex elements.

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>

Copy after login

Using CSS Grid

It’s easier to build web pages without using floats and positioning thanks to the CSS Grid feature, which allows developers to build a grid-based row and column layout system. The grid container is the parent element. Display: grid Used to create elements as a grid.

Some CSS grid properties are as follows -

Grid-template-columns – used to create columns. These values are expressed in the form of length, %, etc.,
Grid-template-rows – used to create rows. The value is expressed in the form of length, %, etc.,
Grid-gap – It is a shorthand property for column gaps 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>

Copy after login

in conclusion

In this article, we discussed different ways to vertically align images in sections that extend across the entire web page.

The above is the detailed content of How to vertically align an image in a section that extends across the entire web page?. For more information, please follow other related articles on the PHP Chinese website!