Html 如何将网站集中在纯广告中_Html_Css_Jinja2_Centering_Pure Css

Html 如何将网站集中在纯广告中

html css

Html 如何将网站集中在纯广告中,html,css,jinja2,centering,pure-css,Html,Css,Jinja2,Centering,Pure Css,我使用的是纯框架，它似乎没有为整个页面的居中提供机制。我发现了以下片段： #container { width:100%; max-width:750px; margin: 0 auto; } 在桌面上，一切正常：但在手机上看起来很奇怪：问题出在哪里？如何解决？这是如何不呈现页面的外观： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

我使用的是纯框架，它似乎没有为整个页面的居中提供机制。我发现了以下片段：

#container {
  width:100%;
  max-width:750px;
  margin: 0 auto;
}

在桌面上，一切正常：但在手机上看起来很奇怪：问题出在哪里？如何解决？这是如何不呈现页面的外观：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Keyring</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/key.png') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pure.css') }}">
    <link rel="stylesheet" type='text/css' href="{{ url_for('static', filename='css/keyring.css') }}">
  </head>
  <body>
    <div id="container">
      <header>
        <h1>Keyring</h1>
      </header>
      <main>
        <section id="generate">
          <form class="pure-form pure-form-stacked" method="POST" action="{{ url_for('keyring') }}">
            {% if errors %}
              <ul class="errors">
                {% for error in errors %}
                  <li>! <strong>{{ error }}</strong> !<li>
                {% endfor %}
              </ul>
            {% endif %}
            <label for="service">Service</label>
            <input name="service" type="text">
            <label for="key">Master key</label>
            <input name="key" type="password">
            <label for="length">Length</label>
            <input name="length" type="number" value="10">
            <label for="lower" class="pure-checkbox">
              <input type="checkbox" name="lower" checked>
              Lower case letters
            </label>
            <label for="upper" class="pure-checkbox">
              <input type="checkbox" name="upper" checked>
              Upper case letters
            </label>
            <label for="digits" class="pure-checkbox">
              <input type="checkbox" name="digits" checked>
              Digits
            </label>
            <label for="symbols" class="pure-checkbox">
              <input type="checkbox" name="symbols">
              Symbols
            </label>
            <input class="pure-button pure-button-primary" type="submit" value="Generate password">
          </form>
        </section>
        {% if password and service %}
          <section id="result">The password for the service {{ service }} is <span class="password">{{ password }}</span>.</section>
        {% endif %}
      </main>
    </div>
  </body>
</html>


钥匙圈
钥匙圈
{%if错误%}

{错误%中的错误为%0}
!{error}<李>
{%endfor%}

{%endif%}
服务
主钥匙
长度
小写字母
大写字母
数字
象征
{%if密码和服务%}
服务{{service}}的密码是{{password}。
{%endif%}

如果“pure”不能帮助您完成最基本的CSS，那么最好将其抛在脑后。您的手机样式上似乎有一个

文本对齐：居中。。您必须共享css内容，否则我们将无能为力。容器

有一个

文本对齐：左？如果没有，就加上它，但是是的，他说了什么