为什么文本不在移动设备中居中（HTML）[重复]答案

【问题标题】：Why the text is not centered in mobile devices (HTML) [duplicate]为什么文本不在移动设备中居中（HTML）[重复]
【发布时间】：2021-01-08 21:40:04
【问题描述】：

Website screenshot in PC

Website screenshot in the mobile device

这是 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet"
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
</head>
<body>
  <div class="first">
    <h1>Hey!</h1>
</div>
</body>
</html>>

这是 CSS 代码

body {
background-color: rgb(20, 18, 18);
}
.first {
    position: relative;
    margin-right: 300px;
    color: white;
        text-align: center;        
        font-family: 'PT Sans Narrow', sans-serif;
}

【问题讨论】：

标签： javascript html css text alignment

【解决方案1】：

使用以下css

.first
{
   color: white;
   text-align: center;
}
.first h1
{
   display: inline-block;
}

【讨论】：

什么是内联块？
developer.mozilla.org/en-US/docs/Web/CSS/display
在 Stack Overflow 上不鼓励仅使用代码的答案，因为它们没有解释它如何解决问题。请编辑您的答案，以解释为什么此代码已在桌面上运行时解决了移动设备上的问题，以便它对 OP 以及其他有类似问题的用户有用。

【解决方案2】：

嘿，有很多解决方案。

您可以像下面的代码一样设置元素的宽度。
或者您可以将display: 选项设置到元素中（例如，display:contents）

body {
background-color: rgb(20, 18, 18);
}
.first {
    position: relative;
    margin-right: 300px;
    color: white;
    text-align: center;        
    font-family: 'PT Sans Narrow', sans-serif;
    width: 100%;
    /* display: contents; */
}

<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet"
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
<body>
  <div class="first">
    <h1>Hey!</h1>

【讨论】：

为什么有跨度>

【解决方案3】：

您可以使用 flexbox，尤其是在移动尺寸或桌面尺寸的媒体查询中

.first {
    position: relative;
    margin-right: 300px;
    color: white;
    width:100%;
       display:flex;
justify-content:center;
align-items:center;
        text-align: center;        
        font-family: 'PT Sans Narrow', sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
</head>
<body>
  <div class="first">
    <h1>Hey!</h1>
</div>
</body>
</html>

【讨论】：

如果你想让文本在垂直对齐上居中，你应该给 div 一个高度

【解决方案4】：

我认为您只需要删除您的 margin-right: 300px; - 这最终会将所有内容向左移动 300 像素，从而使其在移动设备上非常偏离中心。

【讨论】：

是的，我会试试的