Question

我目前正在学习CSS，我发现了一个非常奇怪的问题。当我试图在div的中间对齐文本时，水平轴为1 px（右：82px;左：81px;），垂直轴为2像素（上：13px;下：11px; ）。首先，我认为这可能只是来自字体的错误，但在尝试了其他一些问题之后仍然存在问题。有人可以解释导致问题的原因吗？我有办法解决它吗？

＆＃13;

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

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

<div id="Div_One">
    <div id="Div_Center">
        Random Text
    </div>
</div>

＆＃13;

Answer 1

您可以将文字放在一个段落中。如果它只是一个文本，您可以为该段落提供一个ID。如果是很多文本，请将所有带有该字体的段落作为类。如果它是所有段落，则样式段落如下：将位置设置为相对，并使用顶部和左侧进行校正。不要忘记，如果是段落，行高也会影响文本的垂直位置。将文本放在span标记之间时，可以这样做。

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

文字中心关闭，只有几个像素

1 个答案: