CODEWITHSUNDEEP
htmlcss
sopanha
sopanha

Reputation: 345

how do i vertical align middle div2 and div3 inside this wrapper?

I spent hours trying to figure out how to vertical align middle .div2 and .div3? Hope someone out there can help me. Thanks so much. you guys are the best. Any answers would be appreciated.
enter image description here

 <style>
        *{
            margin:0;
            padding:0;
        }
        .wrapper{
            border: 4px solid black;
            width:900px;
            height:100px;
            text-align: center;
            display: table;
        }
        .div1,.div2,.div3{
            background: gray;
        }
        .left{
            float: left;
        }
        .right{
            float:right;
        }
        .center{
            display: inline-block;
            margin:0 auto;
            line-height: auto;
        }
        .clear{
            clear:both;
        }
        span{
            display: table-cell;
            vertical-align: middle;
        }
    </style>

<div class="wrapper">
    <span>
        <div class="left div1">
            <p>div1</p>
            <p>div1</p>
            <p>div1</p>
        </div>
        <div class="center div2">
            <p>div2</p>
        </div>
        <div class="right div3">
            <p>div3</p>
            <p>div3</p>
        </div>
    </span>
</div>

Upvotes: 4

Views: 134

Answers (3)

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2552

Try This css

<style>
p { margin: 0px; padding: 0px;  background: none repeat scroll 0 0 #808080;
    }
.div1, .div2, .div3 {
    display: table-cell; 
    vertical-align: middle;
    width: 450px;
}

</style>

Demo

Upvotes: 4

Mr_Green
Mr_Green

Reputation: 41842

Using display: inline-block: (Added inner-wrapper to contents in HTML)

CSS

    * {
        margin:0;
        padding:0;
    }
    .wrapper {
        border: 4px solid black;
        width:900px;
        height:100px;
        text-align: center;
        display: table;
    }
    .div1, .div2, .div3 {
    }
    .center, .left, .right {
        display: inline-block;
        width: 33%;
        vertical-align:middle;
        line-height: auto;
    }
    .clear {
        clear:both;
    }
    span {
        display: table-cell;
        vertical-align: middle;
    }
    .left > div {
        float: left;
    }
    .right > div {
        float: right;
    }
    .center > div {
        display: inline-block;
        margin: 0 auto;
    }
    .inner-wrapper {
        background: gray;
    }

Working Fiddle

Upvotes: 0

Renjith
Renjith

Reputation: 216

please check the below code.

url : http://jsfiddle.net/VqGJN/

  <div class="wrapper">
<span>
    <div class="left div1 cell">
        <p>div1</p>
        <p>div1</p>
        <p>div1</p>
    </div>
    <div class="center div2 cell">
        <p>div2</p>
    </div>
    <div class="right div3 cell">
        <p>div3</p>
        <p>div3</p>
    </div>
</span>

css :

.wrapper {
    display:table;
}
.wrapper span {
    display:table-row;
}
.wrapper .cell {
    display:table-cell;
    width:200px;
    vertical-align:middle;
}

Upvotes: 1

Related Questions