テキストセンターが数ピクセルでオフになっています

現在私はCSSを学習しており、非常に奇妙な問題が見つかりました。 divの真ん中にテキストを配置しようとすると、横軸（右：82px、左：81px;）と縦軸（Top：13px、下部：11px; ）。まず、フォントから来たバグかもしれないと思っていましたが、他のいくつかを試してみても問題は残りました。誰かが問題を引き起こしていることを説明してください、それを修正できる方法はありますか？テキストセンターが数ピクセルでオフになっています

#Div_One{ 
 
    margin:0; 
 
    padding:0; 
 
    width:300px; 
 
    background-color:gray; 
 
} 
 

 
#Div_Center{ 
 
    position:relative; 
 
    width:300px; 
 
    line-height:40px; 
 
    background-color:gray; 
 
    color:#000; 
 
    text-align:center; 
 
    font-family:"Ubuntu"; 
 
    font-size:20px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
 

 
<div id="Div_One"> 
 
    <div id="Div_Center"> 
 
     Random Text 
 
    </div> 
 
</div>

出典

2017-04-16 George Stoqnov

はよくない「半画素」が存在しないので、水平可能ではないかもしれないが、私はあなたがそれをズームインするとき、垂直 –

は、あなたのサイズを取る方がはるかに簡単いただきました！間違って知らない：https://codepen.io/anon/pen/XRbaxbは普通のようです。確かに、ピクセルは壊れることはできません、各ブラウザは、彼らの方法を丸める –

あなたは段落にテキストを置くことができます。 1つのテキストだけの場合は、段落にIDを付けることができます。それがテキストの場合は、そのフォントを持つすべての段落にクラスを与えます。それがすべての段落の場合は、次のように段落をスタイル設定します。相対的に位置を設定し、上下で修正します。段落の場合、行の高さもテキストの垂直方向の位置に影響することを忘れないでください。スパンタグの間にテキストを配置するときも同じことができます。

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
     <style> 
      #Div_One{ 
       margin:0; 
       padding:0; 
       width:300px; 
       background-color:gray; 
      } 

      #Div_Center{ 
       position:relative; 
       width:300px; 
       line-height:40px; 
       background-color:gray; 
       color:#000; 
       text-align:center; 
       font-family:"Ubuntu"; 
       font-size:20px; 
      } 
      #myText { 
       position:relative; 
       top:10px; 
       left:-20px; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="Div_One"> 
      <div id="Div_Center"> 
       <p id="myText">Random Text</p> 
      </div> 
     </div> 
    </body> 
</html>

出典

2017-04-16 17:26:05 Kobbe

テキストセンターが数ピクセルでオフになっています

答えて

関連する問題