Vertikale Zentrierung scheint nicht zu funktionieren mit einigen Schriften in Chrome für Handys - html, css, google-chrome, Schrift, fontfamily

Ich verstehe nicht, warum scheint unmöglich zu zentrierenvertikal innerhalb eines Containers Elemente wie Überschriften, Absatz, Spannweite .. mit einigen Schriften in Chrome für mobile.Es funktioniert besser in Firefox für mobile statt. Ein Beispiel : Open-Sans funktioniert sowohl auf Firefox Mobile als auch auf Chrome Mobile.Center, das vertikal die Schriftfamilie Raleway verwendet, scheint beispielsweise nur mit Firefox Mobile möglich.

    #x-wrapper {

position:absolute;
left:100px;
font-family:"Open Sans",sans-serif;font-weight:400;

}

#y-wrapper {
position:absolute;
left:200px;
font-family:"Oswald",sans-serif;font-weight:400;
}

.circle {
width:50px;
height:50px;
border:1px black solid;
border-radius:25px;
}

.hello{
position:relative;
height:100%;
width:100%;
}

.hello h5 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0px;
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
</head>

<body>
<div id="x-wrapper" class="circle">
<div class="hello">
<h5>hello</h5>
</div>
</div>
<div id="y-wrapper" class="circle">
<div class="hello">
<h5>hello</h5>
</div>
</div>
</body>
</html>

Antworten:

2 für die Antwort № 1

Ich würde kommentieren, um Fragen zu stellen, aber nicht genug rep noch: /

Hast du so etwas versucht:

.circle {
display: flex;
align-items: center;
justify-content: center;
}

verwenden FlexboxSie können sehr nützlich sein, wenn Sie versuchen, Textelemente vertikal auszurichten. Flexbox ist auch mit den meisten Browsern kompatibel: Verknüpfung


2 für die Antwort № 2

Danke für die Antwort Alfie aber tut nichtbehebe dieses Problem. Es scheint nicht mit dem Code verwandt zu werden, der für das Zentrierungselement verwendet wird, sondern stattdessen für etwas anderes. Ich schrieb einen weiteren Code, um mein Problem besser zu erklären.

			#Oswald {
font-family: "Oswald", sans-serif;font-weight:400;
}

#Raleway {
font-family: "Raleway", sans-serif;font-weight:600;
}

#Open-Sans {
font-family: "Open Sans", sans-serif;font-weight:600;
}
.title {
padding-bottom:15px;
}
.circle {
width:50px;
height:50px;
border:1px solid black;
border-radius:25px;
}

.hello-flex {
position:relative;
height:100%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}

.hello-abs  {
position:relative;
height:100%;
width:100%;
}

.hello-abs span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

span {
margin:0px;
font-size:10px;
}

.separator {
padding:15px 0px;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css">
</head>
<body>
<section id="Oswald">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="title text-center">
<h1>Oswald</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="circle center-block">
<div class="hello-flex">
<span>HELLO</span>
</div>
</div>
</div><!-- end col -->
<div class="col-xs-6">
<div class="circle center-block">
<div class="hello-abs">
<span>HELLO</span>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end container -->
</section>
<div class="separator"></div>
<section id="Raleway">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="title text-center">
<h1>Raleway</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="circle center-block">
<div class="hello-flex">
<span>HELLO</span>
</div>
</div>
</div><!-- end col -->
<div class="col-xs-6">
<div class="circle center-block">
<div class="hello-abs">
<span>HELLO</span>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end container -->
</section>
<div class="separator"></div>
<section id="Open-Sans">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="title text-center">
<h1>Open-Sans</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="circle center-block">
<div class="hello-flex">
<span>HELLO</span>
</div>
</div>
</div><!-- end col -->
<div class="col-xs-6">
<div class="circle center-block">
<div class="hello-abs">
<span>HELLO</span>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end container -->
</section>
</body>
</html>

Das ist die Ausgabe in Chrome 48.0.2564.95 für Android:

Bildbeschreibung hier eingeben

Mit der Raleway-Schriftfamilie scheint Chrome zusätzlichen Leerraum unter dem Text hinzuzufügen. Gibt es eine Möglichkeit, das zu beheben?


Speisekarte