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

Home

Web Front-end

CSS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 05:09 PM

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;
}

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 id="Vertical-Alignment"> 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

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 id="Vertical-alignment-of-images-using-CSS-flexbox"> 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’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 id="Vertical-alignment-of-images-using-CSS-Grid"> 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>

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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that