CODEWITHSUNDEEP
htmlcss
user3106579
user3106579

Reputation: 663

align image in a div vertically center

CODE:

.company-logo-wrap{
    display: block;
    background: #fff;
    margin-left: -15px;
    padding: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    height: 400px;
}

Tried inline block, float etc, couldn't get it work..
I cannot use padding / margin as it's user upload img, so the size is not always the same.

FIDDLE

Upvotes: 0

Views: 58

Answers (4)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

HTML

<div class="main">

 <div class="box"></div>   
</div>

CSS

.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }

/* for centering */
.box{ display: inline-block; }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }

Check this http://jsfiddle.net/SxxWV/11/

Upvotes: 0

Shantnu raj Singh
Shantnu raj Singh

Reputation: 21

Use following Css

.company-logo-wrap{
    display: table;
    background: #fff;
    margin-left: -15px;
    padding: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    height: 400px;
    width:100%

}

.company-logo-inner {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Use display:table and table-cell

.company-logo-wrap{
    display:table; 
    background: #fff;
    margin-left: -15px;
    border: 1px solid red;
    text-align: center;
    height: 400px;
    width:100%
}
.company-logo-inner{
  display:table-cell;
   vertical-align:middle;
  background:grey
}

DEMO

Upvotes: 0

Praveen
Praveen

Reputation: 56509

You can use vertical-align: middle property, which will work only with display: table-cell/table

.company-logo-wrap{
    display: table-cell;  
    background: #fff;
    margin-left: -15px;
    padding: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    height: 400px;
    vertical-align: middle;
}

JSFiddle

Upvotes: 1

Related Questions