个人中心
gpt4 book ai didi

html - 在 div 中居中文本，div 在 Safari 中不显示

转载 作者：行者123 更新时间：2023-11-28 07:15:03 26 4
gpt4 key购买 nike

工作 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/

26 4 0
文章推荐： javascript - 事件不跨 react 组件传播
文章推荐： javascript - AngularJS:为什么使用 ng-options 时 $element.find ('option' ) 返回一个空数组？
文章推荐： javascript - 从 JQuery Ajax/Javascript 调用启用 CORS 的 API
文章推荐： ios - 为什么带函数的 swift 字典在类外工作但在类内产生错误？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com