Question

我想垂直对齐文本（即270度）和图像的垂直中间。这就是我真正想要的东西

enter image description here

我试过CSS＆＃39;转换＆＃39;财产，但它不适合我。 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;
}

Answer 1

这是一个依赖伪元素的解决方案，因此使用最小标记：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);
}

Answer 2

将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设置“top：50％”样式。并相对于标签的长度更改值。

Answer 3

请将标签替换为 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;
}

Answer 4

您可以参考此解决方案：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;
    }

如何垂直对齐标签（270度）？

4 个答案: