Question

我不明白为什么似乎不可能在容器元素中垂直居中作为标题，段落，跨度..使用Chrome for mobile中的一些字体。在Firefox for mobile中更好地工作。一个例子： Open-Sans可以在Firefox移动和Chrome Mobile.Center上垂直使用，例如，使用字体系列Raleway，只能使用Firefox mobile。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我会评论提出问题，但还没有足够的代表：/

你有没有试过这样的事情：

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

使用flexbox，在尝试垂直对齐文本元素时，它们非常有用。 Flexbox还兼容大多数浏览器：link

Answer 2

感谢Alfie的回答，但没有解决这个问题。似乎与用于居中元素的代码无关，而是与其他代码相关。我写了另一段代码，试图以更好的方式解释我的问题。

			#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的Chrome 48.0.2564.95的输出：

使用Raleway字体系列Chrome似乎在文本下方添加了一些额外的空白区域。有办法解决这个问题吗？

Answer 3

此问题可能是由字体中的非拉丁字符引起的。从本质上讲，这不是CSS问题，而是实际字体在字符和基线之间具有额外的空间。

尝试将其添加到您的@ font-face声明中：

@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;
}

如果您自己托管字体，还可以通过Font Squirrel's Webfont Generator运行源字体文件（例如ttf），然后选择仅拉丁文的子集，这也将带来较小字体文件的好处。

使用Chrome for mobile

3 个答案: