[英]Alternative to vertical alignment with table and table-cell
I have this pen: http://codepen.io/helloworld/pen/VYWGbz 我有这支笔: http : //codepen.io/helloworld/pen/VYWGbz
I have set these classes in my production code and they cause IE 11 to NOT render somehow the left black border WHEN the drawer is opened. 我在生产代码中设置了这些类,它们使IE 11在打开抽屉时不会以某种方式呈现左黑色边框。
When I remove the vertical-alignment with table/table-cell as display property the error disappears... (In Chrome its fine...) 当我删除以table / table-cell作为显示属性的垂直对齐方式时,错误消失了(在Chrome中很好...)
What choice do I have else to vertically align the drawer`s glyphicon/span instead of using table on parent and table-cell on child to make vertical align possible with middle? 我还有什么选择可以垂直对齐抽屉的glyphicon / span,而不是使用父级上的表格和子级上的表格单元格来使中间对齐?
Note: The drawer/sidebar always have a height of 100% recieved by its parent. 注意:抽屉/侧边栏始终为其父级接收的高度为100%。
.drawer-left-trigger{
display:table;
}
.drawer-left-trigger > span{
display:table-cell;
vertical-align:middle;
}
HTML HTML
<div id="idtView">
<div style="height:100%;background:blue;" class="col-xs-3">
test1
</div>
<div style="height:100%;background:yellow;" class="col-xs-4">
test2
</div>
<div id="availableSidebarColumn" style="background:orange;padding:0;height:100%;" class="col-xs-1">
<div class="drawer-wrapper">
<div id='drawer-left' class='closed'>
<div class='drawer-left-trigger'>
<span class='glyphicon glyphicon-chevron-left'></span>
</div>
<div class='drawer-left-content'>
<div style="background:orange;;" id="availableCommandsPagerNavigation">
<span class="previous disabled glyphicon glyphicon-chevron-left availableOptionsArrow availableOptionsPagerArrow"></span>
<span class="glyphicon glyphicon-chevron-right availableOptionsArrow availableOptionsPagerArrow"></span>
</div>
<div style="background:gray;" id="availableCommandsContainer">
contentcontentcontentcontentcontentcontentcontent contentcontent content
</div>
</div>
</div>
</div>
</div>
<div style="height:100%;background:pink;" class="col-xs-4">
test2
</div>
</div>
CSS CSS
/*new stuff*/
*{
box-sizing: border-box;
}
.drawer-wrapper{
margin: 0 200px;
display: inline-block;
}
/*The left drawer*/
#drawer-left{/*set a container with the total width of both the container and the trigger*/
position: relative;
height: 100%; width: 205px;
overflow: hidden;
transition: all .35s ease-in-out;
}
#drawer-left:after{/*this will the right border, when the content will be pushed out*/
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
border-right: 1px solid #000;
}
.drawer-left-trigger{
/*set the triggers width here, borders etc.*/
position: absolute;
top: 0; bottom: 0; right: 100%;
margin-right: -25px;/*bring it back inside the wrapper*/
width: 25px;
background:yellow;
/*some styling stuff*/
cursor: pointer;
text-align: center;
font-size: 24px;
line-height: 100%;
}
.drawer-left-trigger > span{
transform: rotate(180deg);
transition: all .35s ease-in-out;
}
#drawer-left.closed .drawer-left-trigger > span{
transform: rotate(0);
}
#drawer-left.closed .drawer-left-trigger{
/*this will push the trigger on the right side*/
left: auto;
right: 25px;
}
.drawer-left-content{
/*this is the container for the header and content*/
position: absolute;
top: 0; bottom: 0; right: 0; left: 24px;/*the triggers width(+-1px from the border)*/
}
#drawer-left.closed .drawer-left-content{
/*this will push the content out*/
left: 100%;
right: -100%;
}
.drawer-left-trigger,
.drawer-left-content{
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
transition: all .35s ease-in-out;
}
JS JS
$(function () {
/*the left one*/
$('.drawer-left-trigger').click(function(){
$(this).parent().toggleClass('opened closed');
});
});
You could use FlexBox. 您可以使用FlexBox。
http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser Support 浏览器支持
http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
You can use translateY, and position relative. 您可以使用transformY和相对位置。
.drawer-left-trigger > span{
transition: all .35s ease-in-out;
transform: rotate(180deg) translateY(-50%);
position: relative;
top: 50%;
}
If the .drawer-wrapper
is the only element on the page, consider setting its height to 100% instead of 500px by adding 如果.drawer-wrapper
是页面上唯一的元素,请考虑通过将其高度设置为100%而不是500px来添加
html,body,.drawer-wrapper {
height: 100%;
}
If you need to add some navigation bar on top, calculate drawer's height by calc(100% - 50px) where 50px is the height of navigation bar. 如果需要在顶部添加一些导航栏,请通过calc(100%-50px)计算抽屉的高度,其中50px是导航栏的高度。
Working version http://codepen.io/antraxis/pen/yyoNpg 工作版本http://codepen.io/antraxis/pen/yyoNpg
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.