How To Center a Div With In Another Div In CSS ?

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

The div tag is used to construct a division or section of an HTML document in which other elements of HTML is placed and that division/section works like a container whose CSS styling can be done as a single unit or javascript can be used to perform various tasks on that container.

CSS Another Div

1.How to center a div within another div

Syntax:

<div>
  <h3>'This is a div of the web page.>/h3>
  <p>This is some text in a div element.</p>
</div>
To get a wide aspect of the div tag usage and its implementation in HTML

Example: This example describes how we can place a div inside another div.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <title>Center alignment of inside div</title>
    <style>
        h1 {
            color:green;
            padding-left : 47px;
            text-size:2vw;
        }
        h2 {
            padding-left: 11px;
            text-size:1vw;
        }
    </style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Center alignment of inside div</h2>
<div style="background-color:#4dff4d;width:44%;text-align:center;padding:70px;">
    <div style="background-color:#33cc33;width:70%;text-align:center;padding:51px;margin:0 auto">
        <h3 style="font-size:2vw;">Example of div inside a div.</h3>
        <p style="font-size:2vw;">It has background color = #33cc33.</p>
        <p style="font-size:2vw;">This is some text in a div element.</p>
    </div>
</div>
</body>
</html>

 

Example: This example describes how we can place 2 div side by side with each div having a center aligned div within itself.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <title>2 div example</title>
    <style>
        h1 {
            color:green;
            text-size:2vw;
        }
        h2{
            text-size:1vw;
        }
        h1, h2 {
            padding-left: 100px;
        }
    </style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Example with 2 div</h2>
<div style="background-color:#4dff4d;width:44%;text-align:center;padding:50px;float:left;">
    <div style="background-color:#33cc33;width:70%;text-align:center;padding:30px;margin:0 auto">
        <h3 style="font-size:2vw;">Example of div inside a div.</h3>
        <p style="font-size:2vw;">It has background color = #33cc33.</p>
        <p style="font-size:2vw;">This is some text in a div element.</p>
    </div>
</div>
<div style="background-color:#00cc44;width:44%;text-align:center;padding:50px;float:left;">
    <div style="background-color:#66ff33;width:70%;text-align:center;padding:30px;margin:0 auto">
        <h3 style="font-size:2vw;">Example of div inside a div.</h3>
        <p style="font-size:2vw;">It has background color = #66ff33.</p>
        <p style="font-size:2vw;">This is some text in a div element.</p>
    </div>
</div>
</body>
</html>

Related Post