[英]How to align a span or div to the middle when it's rotated?
我試圖匹配基於HTML和CSS的嵌套手風琴布局,以匹配模擬,看起來如下所示:
我的實現布局如下所示:
對齊問題是為了在設計中對齊旋轉文本和寬度問題的中心。
body{ background: seagreen; font-size: 16px; font-family: Arial; color: #333; border-color: none; } div.container{ margin: 0 auto; padding: 10px; background: #ccc; border: solid 1px; width: 50%; } li { list-style-type: none; padding: 5px; background: #ddd; border: solid 1px; } li.has-children.and{ background: #4059AA; } li.has-children.or { background: #BE60A6; } li.has-children ul { margin-top: -3%; } li span{ display: inline-block; font-weight: bold; /* Safari */ -webkit-transform: rotate(-90deg); vertical-align: baseline; /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*-webkit-transform: skewY(3deg); -moz-transform: skewY(3deg);*/ -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; }
<div class="container"> <ul class="tabs"> <li class="has-children and"> <span>AND</span> <ul> <li>Sachin</li> <li>Sourav</li> <li>Dravid</li> <li class="has-children or"> <span>OR</span> <ul> <li>Bravo</li> <li>Gayle</li> <li>Sarwan</li> <li class="has-children and"> <span>AND</span> <ul> <li>Hansie</li> <li>Rhodes</li> <li>Pollock</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
我的嘗試:
一些規格:
data-
屬性,並寫為列表的偽元素before
的內容 writing-mode: vertical-lr;
屬性 flexbox
列中,您可以控制數據和標題的垂直對齊方式 最終的結果非常敏感
標記
<div class="data">
<ul data-logical-operator="AND" style="--bg:blue">
<li> <!-- 1st level -->
<dl>
<dt><span>Attribute</span></dt>
<dd><span>LLDP System Description</span></dd>
<dt><span>Operator</span></dt>
<dd><span>Equal</span></dd>
<dt><span>Value</span></dt>
<dd><span>RegDN 6388 MINET_6920</span></dd>
</dl>
<ul data-logical-operator="OR" style="--bg:violet"> <!-- 2nd level -->
<li>
<dl>
<dt><span>Attribute</span></dt>
<dd><span>LLDP System Description</span></dd>
<dt><span>Operator</span></dt>
<dd><span>Equal</span></dd>
<dt><span>Value</span></dt>
<dd><span>RegDN 6388 MINET_6920</span></dd>
</dl>
<dl>
<dt><span>Attribute</span></dt>
<dd><span>LLDP System Description</span></dd>
<dt><span>Operator</span></dt>
<dd><span>Equal</span></dd>
<dt><span>Value</span></dt>
<dd><span>RegDN 6388 MINET_6920</span></dd>
</dl>
<ul data-logical-operator="AND" style="--bg:blue"> <!-- 3rd level -->
<li>
<dl>
<dt><span>Attribute</span></dt>
<dd><span>LLDP System Description</span></dd>
<dt><span>Operator</span></dt>
<dd><span>Equal</span></dd>
<dt><span>Value</span></dt>
<dd><span>RegDN 6388 MINET_6920</span></dd>
</dl>
</li>
</ul> <!-- /3nd level -->
</li>
</ul> <!-- /2nd level -->
</li> <!-- /1st level -->
</ul>
</div>
CSS
.data { position: relative; font: 14px Arial;}
.data ul {
margin: 0;
position: relative;
padding-left: 45px;
list-style: none; }
.data dl {
padding: 0 20px;
margin: 0 0 15px 0;
border: 1px #d8d8d8 solid;
width: 100%;
display: flex;
height: 6rem;
flex-flow: column wrap;
}
.data dt, .data dd {
margin: 0;
height: 50%;
width: 30%;
line-height: 3rem;
}
.data dl span {
line-height: 1.3;
display: inline-block; }
.data dt span { vertical-align: middle; }
.data dd span { vertical-align: top; }
.data ul[data-logical-operator]::before {
display: inline-block;
content: attr(data-logical-operator);
background-color: var(--bg);
color: #fff;
position: absolute;
width: 45px;
bottom: 0;
line-height: 45px;
top: 0;
text-align: center;
transform: rotateZ(180deg);
writing-mode: vertical-lr;
}
結果
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.