To positioned text to center an image, use the transform property in CSS. You can try to run the following code for centered text over an imageExampleLive Demo                    .container {             position: relative;          }          .topleft {             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%, -50%);             font-size: 18px;          }          img {             width: 100%;             height: auto;             opacity: 0.3;          }                     Image Text       Add some text to an image in the center of an image:                          Center          

The following are the flex-item propertiesorderflex-growflex-shrinkflex-basisflexalign-selfLet us see an example of flex-basis propertySet the length of a flex item with the flex-basis CSS property. You can try to run the following code to implement the flex-basis propertyExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          Q9          

To adjust the gap size, use grid-column-gap, grid-row-gap or grid-gap property in CSS.grid-column-gap propertySet gap between Grid columns with CSS. You can try to run the following code to implement the grid-column-gap property.ExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-column-gap: 20px;          }          .ele {   ... Read More

Define a flex container and set the flex items in it.You can try to run the following code to learn how to implement Flexbox elements. Q1, Q2, Q3 here are the flex-items. The entire area is Flexbox elementExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          

Even though CSS was designed to handle styling, web developers have always had a special issue when developing remarkable layouts, which nearly always requires the use of JavaScript. But Flexbox is here to make that different. For getting better understanding on the CSS flexbox layout module, let's dive into the article. CSS Flexbox Developers can design adaptable and flexible web page layouts with the help of the flexible property, which is an adaptable command. This property removes the need to define exact dimensions by allowing webpage elements to be sized and positioned relative to one another. Because it lets items ... Read More

The vertical line in the following is called Grid Columns.

Use the align-content property with value flex-start to set the flex lines in the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: blue;             align-content: flex-start;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Grid Elements in CSS has parent and child elements. Here’s an example wherein a grid is created with 6 elements.ExampleLive Demo                    .container {             display: grid;             grid-template-columns: auto auto;             padding: 20px;          }          .ele {             background-color: orange;             border: 2px solid gray;             padding: 25px;             font-size: 20px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

In the early days of web development, developers had to use a variety of tricks and workarounds to arrange elements on the screen in a way that produced results that were consistent across different browsers. However, these days almost everyone uses CSS's most popular layout tools—FlexBox and the Grid. One of the best grid-based websites is Reebok. In this article we are going to learn about the CSS grid layout. CSS Grid Layout A two-dimensional layout approach called CSS Grid Layout allows you to arrange content in rows and columns. It takes a top-down approach to layout, permits explicit item ... Read More

You can try to run the following code to use a max-width property to make your video player responsive −ExampleLive Demo                          video {             max-width: 100%;             height: auto;          }                                                     To check the effect, you need to resize the browser.