如何垂直對齊標籤（270度）？

我想垂直對齊文本（即270度）和圖像的垂直中間。這就是其實我是想如何垂直對齊標籤（270度）？

enter image description here

我用CSS試圖「改造」屬性，但它不是爲我工作。 Here i tried the code。與HTML和CSS代碼我想是

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

來源

2014-07-01 Rameez

下面是依賴於僞元素的解決方案，從而使用最少的標記：http://jsfiddle.net/C49q7/1/。特別強調了要素的一致性。 #image元素可以在任何地方移動。標籤精確地遵循它。

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

來源

2014-07-01 04:41:46 DRD

謝謝DRD，是否有可能用圖像更改該紅色框？ – Rameez

當然，有幾種方法可以做到這一點：http://jsfiddle.net/C49q7/2/ – DRD

請拉布勒與DIV更換和使用以下CSS爲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; 
}

來源

2014-07-01 04:37:48 codeee

你可以參考這個解決方案：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>

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

來源

2014-07-01 04:37:58 PRAH

新增CSS到容器中。

#img-container { 
    position: relative; 
}

將css添加到標籤。

#lblConfidence { 
    position: absolute; 
    top: 50%; -moz-transform: 
    rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
}

這裏只給出了對齊標籤紙50％的風格。但這取決於標籤的長度。如果此標籤是動態的，請使用JavaScript設置「頂部：50％」樣式。並將該值相對於標籤的長度進行更改。

來源

2014-07-01 05:30:45

如何垂直對齊標籤（270度）？

回答

相關問題