我已经用HTML创建了一个离散的图例,但我正在努力让图例标题正确对齐,而不管标题中的文本长度如何.
下面是一个例子,它在我的应用程序中看起来像一个简短的标题
... 而这是一个较长的标题
下面是一个简单的工作示例
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
background-color: #999;
}
.box{
background-color: black;
height: 100%;
width: 100%;
}
.my-legend .legend-title {
text-align: center;
margin-bottom: 5px;
font-weight: bold;
font-size: 30px;
color: red;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
text-align: right;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
color: white;
font-size: 20px;
padding-bottom: 40px;
}
.my-legend ul.legend-labels li span {
display: block;
float: right;
height: 45px;
width: 20px;
margin-right: 0px;
margin-left: 5px;
border: 1px solid #999;
}
<div class="row" id="content">
<!-- Image Panel -->
<div class="split left" style="position: relative; height: 800px">
<!-- This is a dynamically generated panel ... but just black here as example -->
<div id="imagePanel" class="box"></div>
<!-- Legend entries -->
<div class='my-legend'
style="position:absolute;
right: 10%; top: 50%;
transform-box: fill-box;
transform: translate(0%,-50%);">
<div class='legend-scale'>
<ul class='legend-labels'>
<li> <b>0</b> <span style="background: rgb(128,64,0)"> </span> </li>
<li> <b>1</b> <span style="background: rgb(251,255,128)"></span> </li>
<li> <b>2</b> <span style="background: rgb(55,128,0)"> </span> </li>
<li> <b>3</b> <span style="background: rgb(128,255,140)"></span> </li>
<li> <b>4</b> <span style="background: rgb(0,128,81)"> </span> </li>
<li> <b>5</b> <span style="background: rgb(128,234,255)"></span> </li>
<li> <b>6</b> <span style="background: rgb(0,38,128)"> </span> </li>
<li> <b>7</b> <span style="background: rgb(157,128,255)"></span> </li>
<li> <b>8</b> <span style="background: rgb(98,0,128)"> </span> </li>
<li> <b>9</b> <span style="background: rgb(255,128,217)"></span> </li>
</ul>
</div>
</div>
<!-- Legend Title -->
<div class='my-legend'
style="position:absolute;
right: 0; top: 50%;
transform-box: fill-box;
transform: translate(0%,-50%);
transform: rotate(-90deg)">
<div class='legend-title' >True Label</div>
</div>
</div>
<!-- Controls -->
<div class="split right" id="controlsPanel" >
Some Other Panel will go here
</div>
</div>