CODEWITHSUNDEEP
htmlcssvertical-alignment
user3083648
user3083648

Reputation: 9

div vertical middle in div

hello I have a problem with vertical-align: middle;

.wp{
    width: 100px;
    height: 500px;
    background-color: #000000;
}
.sub{
    width: 100%;
    height: 20%;
    background-color: red;
    vertical-align: middle;
}
<div class="wp">
    <div class="sub"></div>
</div>

I want to div witch has .sub class will be vertical center of .wp div. plz help me. Sorry for my bad english.

Upvotes: 1

Views: 130

Answers (5)

Ivan Chernykh
Ivan Chernykh

Reputation: 42176

As an alternative, you can use transform's translateY method, like

transform: translateY(-50%);

Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/

Upvotes: 1

Ararat Harutyunyan
Ararat Harutyunyan

Reputation: 926

vertivcal-align works with table-cell. look how it works in jsfiddle.

this is the html and css

<div class="table">
    <div class="tableRow">
        <div class="wp">
            <div class="sub"></div>
        </div>
    </div>
</div>



.table {
    display: table;
    width: 100px;
}

.tableRow{
    display: table-row;
    height: 400px;
}

.wp {
    display: table-cell;
    background-color: tomato;
    vertical-align: middle;
}

.sub {
    height: 200px;
    background-color: green;
}

also you can achieve this by "relative" and "absolute" positions

.wp{
    position: relative;

    width: 100px;
    height: 500px;
    background-color: #000000;
}
.sub{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    width: 100%;
    height: 20%;
    background-color: red;
    vertical-align: middle;
}

Upvotes: 0

R.sandeep
R.sandeep

Reputation: 251

   this is my solution try this
 <html>
    <head>
    <style>
    .wp{
     width: 10%;
    height: 10%;
    float: left;
    background-color: green;
    border: 1px solid #00FF 00;
    margin: 0.5%;
    position: relative;
    }
    .sub
    {
       width: 50%;
    height: 50%;
    background-color: red;
    position: absolute;
    }
    .center{
    margin: 0 auto;
    left: 25%;
    }

    .right{
    left: 50%;
    }

    .middle {
    top: 25%;
    }
    .bottom {
    top: 50%;
    }

    </style>
    </head>
    <body>

    <div class="wp">
        <div class="sub center middle"></div>
    </div>
    </body>
    </html>

Upvotes: 0

Aameer
Aameer

Reputation: 1376

If I understand you correctly, you want something like this

.wp{
    width: 100px;
    height: 500px;
    background-color: #000000;
}
.sub{
    position:absolute;
    top: 250px;
    width: 100px;
    height: 20%;
    background-color: red;
    vertical-align: middle;
}
<div class="wp">
    <div class="sub"></div>
</div>

Hope that helps.

Upvotes: 0

C Jones
C Jones

Reputation: 241

After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:

Vertically Aligning Divs

http://phrogz.net/css/vertical-align/index.html

http://jsfiddle.net/ktxpP/3/

In an attempt to not just provide a link answer: The snippet below belongs to Lalit :

You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.

HTML

My Vertical Div CSS

.outerDiv { display: inline-flex; <== This is responsible for vertical alignment height: 400px; background-color: red; color: white; }

.innerDiv { margin: auto 5px; <== This is responsible for vertical alignment background-color: green; } .innerDiv class margin must be as margin: auto *px;

[* can be your desired value.]

display: inline-flex property is supported in latest(updated/current versions) browsers with HTML5 support.

Always try to define height of vertically align div (i.e. innerDiv) for any further compatibility issue.

.wp{
    width: 100px;
    height: 500px;
    background-color: #000000;
    display:inline-flex;  <--
}
.sub{
    width: 100%;
    height: 20%;
    background-color: red;
    margin:auto;   <--
}
<div class="wp">
    <div class="sub"></div>
</div>

Upvotes: 0

Related Questions