工作 fiddle :http://jsfiddle.net/fvkLfs09/ 如果可能的话，我想让右边的文本和数字始终居中在那个蓝色的 div 中。
HTML
<body>
<div id="wrapper">
<div class="season">
<div class="triangle">
<p class="seasonBanner">SEASON 1</p>
</div>
<div class="patch_table"> <a class="patchlink" href="#">
<div class="patch_big">3.41</div>
</a>
<div class="patch_small">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
<div class="patch_table"> <a class="patchlink" href="'.$patch.'">
<div class="patch_big">1.0.0.143</div>
</a>
<div class="patch_small">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
</body>
和CSS
.seasonBanner {
font-size: 16px;
text-align: center;
top: -35px;
left: -60px;
position: relative;
width: 113px;
margin: 0px;
padding: 0px;
color: white;
}
.triangle {
width: 50%;
height: 0;
padding-left:50%;
padding-top: 50px;
overflow: hidden;
}
.triangle:after {
content:"";
display: block;
width: 0;
height: 0;
clear: both;
margin-left:-500px;
margin-top:-380px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top:464px solid rgb(102, 153, 255);
}
.seasonBanner:not(:first-of-type) {
margin-top: 20px;
}
.patchlink {
color: white;
font-size: 80%;
width: 28px;
position: relative;
background-color: rgba(102, 153, 255, 0.7);
transition: all 0.4s ease-in-out;
margin-bottom: 4px;
}
.patchlink:hover {
background-color: rgb(102, 153, 255);
}
.patch_small {
display: flex;
flex: 1;
-webkit-flex: 1;
flex-direction: column;
-webkit-flex-direction: column;
}
.patch_big {
position: absolute;
width: 15px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: 7px;
text-align: center;
display: inline-block;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
-webkit-transform: rotate(-90deg) translate(-100%, 0);
-webkit-transform-origin: 0 0;
}
.patch_table {
margin-top: 5px;
display: flex;
flex: 1;
-webkit-flex: 1;
}
出于某种原因，左侧的那些链接根本不会显示在 Safari 中。
这是一张它在 safari 上的样子的图片:http://i.imgur.com/hkdGyyP.png
那些蓝色的 div 应该在左边。
最佳答案
这是一个简单的示例，说明如何相对于另一个元素旋转和居中文本...
$(".text").css({'top':$(".box").height()+'px'});
var yoffset = ($(".box").height()-$(".text").width())/2;
var xoffset = ($(".box").width()-$(".text").height())/2;
$(".text").css({
'top':$(".box").height()-yoffset+'px',
'left':xoffset+'px'
});.box {
position: relative;
background: cyan;
width: 1.5em;
height: 100px;
}
.text {
background: yellow;
position: absolute;
top: 0;
left: 0;
}
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-transform-origin: 0% 0%; /* IE 9 */
-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
transform-origin: 0% 0%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="text rotate">100.11</div>
</div>关于html - 在 div 中居中文本，div 在 Safari 中不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32401504/