How to Set Vertical Align Middle to Div by CSS in HTM?

By Hardik Savani January 24, 2023 Category : HTML

If you want to set vertical align middle text, image, div etc then you can set easily by using following example. you can give vertical align middle by saveral way. i also give you example with output. you use any of the example of vertical align middle by css. I also provide saveral example with difference css so you can easily find your solution.

Example 1

In this example you can set vertical align middle using display:table and display:table-cell property of css.

Table-cell

Read Also: How to Remove HTML Tags from String in Laravel?
<html>
    <head>
    <title></title>
    <style type="text/css">
    body {
        padding: 50px;
    }
    .outter {
        width: 500px;background:green;color:white;height: 150px;border:1px solid red;display: table;
    }
    .main-content1 {
        display: table-cell; vertical-align: middle;
    }
    .sub-content1 {
        border:1px solid green; width: 50px; height: 50px; margin: auto;
    }
    </style>
    </head>
<body>
    <div class="outter">
        <div class="main-content1">
            <div class="sub-content1">
                <p>Table-cell</p>
            </div>
        </div>
    </div>
</body>
</html>

Try This......

Tags :
Previous

How can Make an Array from the Values of Another Array's Key Value?
Next

How to set vertical align middle div by CSS in HTML?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares