CODEWITHSUNDEEP
htmlcss
Rameez
Rameez

Reputation: 601

How to align a label vertically(270degree)?

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

enter image description here

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;
}

Upvotes: 0

Views: 243

Answers (4)

Eranga Kapukotuwa
Eranga Kapukotuwa

Reputation: 4962

  1. add css to container.

    #img-container { 
    position: relative; 
}

  2. 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.

Upvotes: 1

DRD
DRD

Reputation: 5813

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);
}

Upvotes: 2

PRAH
PRAH

Reputation: 680

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;
    }

Upvotes: 0

codeee
codeee

Reputation: 397

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;
}

Upvotes: 0

Related Questions