在div中居中文本，div在safari中不顯示

工作小提示：http://jsfiddle.net/fvkLfs09/ 我想使這個文本在右邊的數字總是以該藍色div爲中心，如果可能的話。在div中居中文本，div在safari中不顯示

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應在左側。

來源

2015-09-04 Higeath

這裏有一個簡單的例子，如何旋轉，並且相對於其它元素中心的文字...

$(".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>

來源

2015-09-04 16:52:32

是有一個機會，使它更苗條？就像在我的例子中它應該和你的黃色框一樣寬泛，這個鏈接對於網站來說非常重要，所以我不確定是否需要jquery – Higeath

它可以是任何你想要的大小。 javascript檢測框的大小並相應地居中。它可以在純JavaScript中完成，但更容易使用jQuery。我已經改變了容器框的大小以匹配文本的高度。很明顯，你可以改變它與您的需求與CSS影響javascript –

我試過你的代碼（現在沒有jquery）在鉻上工作正常，但在Safari仍然http://i.imgur.com/Sku31bI.png不想正常顯示 – Higeath

在div中居中文本，div在safari中不顯示

回答

相關問題