How to align a label vertically(270degree)? - html

Question

I want to align a text vertically(That is 270 degree) and in the vertical middle of an image. This is what i actually want
I tried with CSS 'transform' property but its not working for me. Here i tried the code . And the HTML and CSS code i tried is
HTML :
<div id="img-container">
<label id="lblConfidence">Confidence</label>
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
CSS :
#img-container{
margin: 0 auto;
padding:0;
}
#image{
border:5px solid red;
margin-left:50px;
width:10px;
height:100px;
}
#lblConfidence{
vertical-align:middle;
transform:rotate(270deg) ;
-ms-transform:rotate(270deg) ; /* IE 9 */
-transform:rotate(270deg) ; /* Opera, Chrome, and Safari */
}
#lblLow{
margin-left:48px;
}
#lblHigh{
margin-left:48px;
}

Answer 1

Here's a solution that relies on pseudo-elements and thus uses minimal markup: http://jsfiddle.net/C49q7/1/. A particular emphasis has been placed on the alignment of elements. The #image element can be moved anywhere. The labels follow it precisely.
HTML:
<div id="image"><span></span></div>
CSS:
#image {
border:5px solid red;
width:100px;
height:20px;
text-align: center;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: 100px;
}
#image:before {
content: "Conidence";
position: absolute;
top: -24px;
left: 0;
right: 0;
text-align: center;
}
#image > span:before {
content: "High";
position: absolute;
right: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
#image > span:after {
content: "Low";
position: absolute;
left: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}

Answer 2

add css to container.
#img-container {
position: relative;
}
add css to label.
#lblConfidence {
position: absolute;
top: 50%; -moz-transform:
rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
Here only given a style for align the label 50%. But it is depending on the length of the label. if this label is dynamic, please use a javascript to set the " top: 50%" style. and change the value relatively to the length of label.

Answer 3

Please replace lable with div and use below CSS for lblConfidence :
#lblConfidence
{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
writing-mode: tb-rl; /* IE 8 */
filter: flipv fliph; /* IE 8 */
margin-top: 100px;
width: 200px;
text-align: center;
height: 50px;
background:#ccc;
}

Answer 4

you can refer this solution : http://jsbin.com/joqofu/3
<div class="container">
<div class="left"><label>Confidence</label></div>
<div class="right">
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
</div>
and css
.container{
position:relative;
}
#image{
border:5px solid red;
width:10px;
height:100px;
}
.left {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display:block;
height:120px;
width:100px;
text-align:left;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.right{
margin-left:10px;
float:left;
text-align:left;
}