html – 将元素中的垂直范围居中
发布时间:2020-12-14 16:42:33 所属栏目:资源 来源:网络整理
导读:我有一个看起来有点像书架的布局,see my jsfiddle example.书架响应所以没有固定的宽度.我面临的问题是,我无法将文本集中在面板中,“横向”在书籍两侧.由于文本被转换为垂直显示,因此它非常棘手.有没有人对如何使这项工作有任何想法? HTML div class="panel
我有一个看起来有点像书架的布局,see my jsfiddle example.书架响应所以没有固定的宽度.我面临的问题是,我无法将文本集中在面板中,“横向”在书籍两侧.由于文本被转换为垂直显示,因此它非常棘手.有没有人对如何使这项工作有任何想法?
HTML <div class="panel"> <a href="#first"> <span>first</span> </a> </div> CSS .panel { float: left; height: 100%; width: 15%; margin-right: 5%; } .panel a { text-align: right; background: green; padding: 20px 10px; height: 100%; display: block; white-space: nowrap; color: white; float: left; width: 100%; text-decoration:none; } .panel a span { white-space: nowrap; color: white; text-transform: lowercase; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: top right; display: block; width: 300px; margin-left: -300px; letter-spacing: 1px; font-size: 20px; } 解决方法
你有2个简单的选择,显示:flex或table:
display:table示例: body,html,.panel-wrapper { height: 100%; width: 100%; } .panel-wrapper { display: table; border-collape: collapse; table-layout: fixed; background: white; } .panel { display: table-cell; height: 100%; width: 20%;/* you have five here*/ } .panel a { display: block; text-align: center; background: green; padding: 20px 10px; box-sizing:border-box;/*includes padding and borders */ height: 100%; width: 75%;/* each is 15% width */ text-decoration: none; white-space: nowrap; } .panel a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle;/*inline content will vertical-align middle aside it */ } .panel a span { display: inline-block;/* triggers transform*/ color: white; text-transform: lowercase; transform: rotate(-90deg); letter-spacing: 1px; font-size: 20px; vertical-align: middle; } <div class="panel-wrapper"> <div class="panel"><a href="#first"><span>first</span></a> </div> <div class="panel"><a href="#second"><span>second</span></a> </div> <div class="panel"><a href="#third"><span>third</span></a> </div> <div class="panel"><a href="#fourth"><span>fourth</span></a> </div> <div class="panel"><a href="#fifth"><span>fifth</span></a> </div> </div> http://codepen.io/gc-nomade/pen/JGEbLX 或flex: body,.panel-wrapper { height: 100%; width: 100%; margin: 0; } .panel { float: left; height: 100%; width: 15%; margin-right: 5%; } .panel a { text-align: right; background: green; padding: 20px 10px; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; ; white-space: nowrap; color: white; text-decoration: none; } .panel a span { white-space: nowrap; color: white; transform: rotate(-90deg); letter-spacing: 1px; font-size: 20px; } <div class="panel-wrapper"> <div class="panel"><a href="#first"><span>first</span></a> </div> <div class="panel"><a href="#second"><span>second</span></a> </div> <div class="panel"><a href="#third"><span>third</span></a> </div> <div class="panel"><a href="#fourth"><span>fourth</span></a> </div> <div class="panel"><a href="#fifth"><span>fifth</span></a> </div> </div> http://codepen.io/gc-nomade/pen/obBYyY (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |