ऊर्ध्वाधर केंद्र मोबाइल के लिए क्रोम में कुछ टाइपफेस का उपयोग कर काम नहीं कर रहा है - एचटीएमएल, सीएसएस, गूगल क्रोम, टाइपफेस, fontfamily

मैं समझ नहीं पा रहा हूं कि केंद्र के लिए असंभव क्यों लगता हैशीर्षक के रूप में एक कंटेनर तत्वों के अंदर लंबवत, पैराग्राफ, अवधि .. मोबाइल के लिए क्रोम में कुछ टाइपफेस का उपयोग करना। इसके बजाय फ़ायरफ़ॉक्स में बेहतर काम करने के लिए लगता है। एक उदाहरण : ओपन-सैन्स फ़ायरफ़ॉक्स मोबाइल और क्रोम मोबाइल दोनों पर काम करता है। उदाहरण के लिए, फ़ॉन्ट परिवार रालेवे का उपयोग करके लंबवत केंद्र, केवल फ़ायरफ़ॉक्स मोबाइल के साथ संभव लगता है।

    #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>

उत्तर:

जवाब के लिए 2 № 1

मैं प्रश्न पूछने के लिए टिप्पणी करता हूं, लेकिन अभी तक पर्याप्त प्रतिनिधि नहीं है: /

क्या आपने ऐसा कुछ करने की कोशिश की है:

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

का उपयोग करते हुए flexbox, टेक्स्ट तत्वों को लंबवत रूप से संरेखित करने का प्रयास करते समय वे बहुत उपयोगी हो सकते हैं। अधिकांश ब्राउज़रों के साथ फ्लेक्सबॉक्स भी संगत रूप से है: संपर्क


जवाब के लिए 2 № 2

जवाब अल्फी के लिए धन्यवाद लेकिन टी नहीं करता हैउस मुद्दे को हल करें। तत्व को केंद्रित करने के लिए उपयोग किए गए कोड से संबंधित प्रतीत नहीं होता है बल्कि इसके बजाय कुछ और है। मैंने अपनी समस्या को बेहतर तरीके से समझाने की कोशिश कर कोड का एक और टुकड़ा लिखा।

			#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>

Android के लिए क्रोम 48.0.2564.95 में यह आउटपुट है:

यहां छवि विवरण दर्ज करें

रालेवे फ़ॉन्ट परिवार का उपयोग करना क्रोम टेक्स्ट के नीचे कुछ अतिरिक्त सफेद जगह जोड़ता प्रतीत होता है। क्या इसे ठीक करने का कोई तरीका है ?


संबंधित सवाल
सबसे लोकप्रिय