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

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Create an Inline Text Editor With the contentEditable AttributeMar 02, 2025 am 09:03 AM

Building an inline text editor isn't trivial. The process starts by making the target element editable, handling potential SyntaxError exceptions along the way. Creating Your Editor To build this editor, you'll need to dynamically modify the content

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)Mar 04, 2025 am 10:22 AM

This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form

File Upload With Multer in Node.js and ExpressMar 02, 2025 am 09:15 AM

This tutorial guides you through building a file upload system using Node.js, Express, and Multer. We'll cover single and multiple file uploads, and even demonstrate storing images in a MongoDB database for later retrieval. First, set up your projec

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks agoByDDD

Hot Tools

WebStorm Mac version

Useful JavaScript development tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.