CODE:
.company-logo-wrap{
display: block;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
}
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;
}
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
}
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;
}
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.