Vertically Zentrum align Text - arbeitet in Chrom, aber nicht auf Safari

Bitte beachten Sie diese Jsfiddle: https://jsfiddle.net/cxhm681x/Vertically Zentrum align Text - arbeitet in Chrom, aber nicht auf Safari

Bitte überprüfen Sie dies auf Chrome und Safari.

Ich möchte OrderNo und Order Name vertikal zentrieren. Das funktioniert in Chrome gut, aber in Safari ist OrderNo nach oben ausgerichtet.

Hier ist der Code:

<body style="height:100%;"> 
<div style="width:100%; height:100%; "> 

<div style="height:0%; background-color: black;display: flex;align-items: center;">  
    <div style="width:20%;"> 
    <label id="theNofNx" style="color:#FFFFFF;font-size:small;margin-left:5px;">Order No</label> 
    </div> 
    <div style="width:80%;align-items:center;text-align:center;margin: 0 auto;"> 
     <a href="#" target="_blank" style="color:#FFFFFF;text-decoration:none;">Order Name</a> 
    </div> 
    <div style="width:20%;"><label id="theNofNx" style="color: #FFFFFF;font-size:small;margin-right:5px;text-align:right;"></label></div> 
    </div> 
</div> 
</body>

Wie kann ich diese Arbeit für Safari machen auch (Arbeiten in Chrom)?

Quelle

2016-05-19 Jasper

Mögliche Duplikate von [Vertical-align funktioniert nicht in Safari und Chrome] (http: // sta ckoverflow.com/questions/17312521/vertical-align-is-not-working-in-safari-and-chrome) – James111

Dieser Code gibt Text alle in einer Zeile aus. Sind Sie sicher, dass dies in Chrome funktioniert? Bitte aktualisieren Sie die Frage mit Code, der zu Ihrer Beschreibung passt – TylerH

@TylerH> Bitte schauen Sie in Safari nach - Sie können den Unterschied sehen. – Jasper

für div unter CSS-Klasse geht mit

<style> 
.div_parent 
{ 
    display:table; 
    height:50px; 
    background-color: black; 
    text-align:center; 
} 
.div_child 
{ 
    display:table-cell; 
    vertical-align:middle; 
    color:#FFFFFF; 
    font-size:small; 
    margin-left:5px; 
    width:20%; 
} 
</style> 

<body> 
<div style="width:100%; height:100%; "> 
<div class="div_parent">  
    <div class="div_child"> 
    <label id="theNofNx">Order No</label> 
    </div> 
    <div class="div_child"> 
     <a href="#" target="_blank" style="color:#FFFFFF;text-decoration:none;">Order Name</a> 
    </div> 
    <div class="div_child"><label id="theNofNx" style="color: #FFFFFF;font-size:small;margin-right:5px;text-align:right;"></label></div> 
    </div> 
</div> 
</body>

Quelle

2016-05-19 05:53:41 BakerStreet221

Dank Pratham die Idee der Verwendung von Display: Tisch-Zelle gearbeitet. – Jasper

-2

versuchen, das display: table-Methode und der Code sollte dies so etwas wie diese

<div style="width:100%; height:100%; "> 

     <div style="height:0%; background-color: black;display: flex;align-items: center;"> 
      <div style="width:20%;display:table;"> 
       <label id="theNofNx" style="color:#FFFFFF;font-size:small;margin-left:5px;display: table-cell;vertical-align:middle;">Order No</label> 
      </div> 
      <div style="width:80%;display: table;"> 
       <a href="#" target="_blank" style="color:#FFFFFF;text-decoration:none;display: table-cell;vertical-align:middle;">Order Name</a> 
      </div> 
      <div style="width:20%;display: table;"> 
       <label id="theNofNx" style="color: #FFFFFF;font-size:small;margin-right:5px;text-align:right;display: table-cell;vertical-align:middle;"></label> 
      </div> 
     </div> 
    </div>

Hoffnung hilft

Achten Sie darauf und glücklich Codierung

Quelle

2016-05-19 05:43:40

Dies ändert keine vertikale Ausrichtung; Es verschiebt den Auftragsnamen nur nach links. – TylerH

Vertically Zentrum align Text - arbeitet in Chrom, aber nicht auf Safari

Antwort

Verwandte Themen