我有以下HTML代码:
<div id="slideClick">
<div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;">
<span class="sideMsg">MESSAGES</span>
</div>
</div>
CSS:
.sideMsg
{
color:#333;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
display:inline-block;
bottom:0;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
border: 1px solid red;
}
#slideClick {
float:left;
height:90px;
width:40px;
background:#EE8D40;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
text-align: center;
}
显示:
如何将SPAN
水平和垂直居中置于蓝色DIV
内?
答案 0 :(得分:2)
我创建了JSFiddle这可能是你想要的
<div id="slideClick">
<div>
<span class="sideMsg">MESSAGES</span>
</div>
</div>
我创建了JSFiddle这可能是你想要的
<div id="slideClick">
<div>
<span class="sideMsg">MESSAGES</span>
</div>
</div>
.sideMsg
{
color:#333;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
display:inline-block;
bottom:0;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
border: 1px solid red;
}
#slideClick {
float:left;
height:190px;
width:200px;
background:#EE8D40;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
答案 1 :(得分:1)
如上所述,这是CSS中的一个常见问题,但是当我只旋转文本范围时,我会看到棘手的部分。旋转包装元素,从那里居中应该是馅饼。
#slideClick{
-webkit-transform: rotate(90deg);
}
例如,设置高度后的行高。
jsfiddle:http://jsfiddle.net/1vnbyL1t/3/
答案 2 :(得分:1)
由于您的div具有固定大小,因此您可以使用内部跨度的相对位置:
position:relative;
top:35px;
right:17px;
并相应地调整它:http://jsfiddle.net/38dgooxj/2/