CODEWITHSUNDEEP
htmlcssgoogle-chrometypefacefont-family
Riccardo
Riccardo

Reputation: 129

Vertical centering doesn't seem to work using some typefaces in Chrome for mobile

i don't understand why seems impossible to center vertically inside a container elements as headings , paragraph , span .. using some typefaces in Chrome for mobile.Seems to work better in Firefox for mobile instead. An example : Open-Sans works both on Firefox mobile and Chrome Mobile.Center vertically using font family Raleway , for example , seems possible with Firefox mobile only.

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

Upvotes: 4

Views: 1192

Answers (3)

Aaron Cicali
Aaron Cicali

Reputation: 1556

This problem might be caused by non-Latin characters in the font. Essentially, it's not a CSS issue but the actual font that has this additional space between the characters and the baseline.

Try adding this to your @font-face declaration:

@font-face {
    /* latin only */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

If you're self hosting the font, you can also run the source font file (e.g. ttf) through Font Squirrel's Webfont Generator and choose Latin-only subsetting which would also have the benefit of a smaller font file.

Upvotes: 1

Riccardo
Riccardo

Reputation: 129

Thank you for the answer Alfie but doesn't resolve that issue. Doesn't seem related to the code used for centering element but to something else instead. I wrote another piece of code trying to explain my problem in a better way.

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

That's the output in Chrome 48.0.2564.95 for Android :

enter image description here

Using Raleway font family Chrome seems to add some extra white space below text . Is there a way to fix this ?

Upvotes: 2

Alfie B
Alfie B

Reputation: 172

I would comment to ask questions, but not enough rep yet :/

Have you tried something like this: 

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

using flexbox, they can be very useful when trying to vertically align text elements. Flexbox is also compatibly with most browsers: link

Upvotes: 3

Related Questions