Невозможно центрировать div на странице из-за тега script - PullRequest
Новая
       0

Невозможно центрировать div на странице из-за тега script

0 голосов
/ 28 марта 2020

Я пытался разработать веб-приложение с Bootstrap 4.3.1 и Spotify API, и все, что я sh для достижения sh на данный момент, это центрирование элемента на экране (вертикально и горизонтально), который содержит имя пользователя, прошедшего аутентификацию. По-видимому, я не могу сделать это, если div находится внутри тега script - есть ли способ обойти это? Я включил соответствующую выдержку из моего файла индекса. html и моего стиля. css файла.

Индекс. html

<script id="user-info-template" type="text/x-handlebars-template">
  <div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto text-center">
      <h1 class="display-4">Welcome, {{display_name}}.</h1>
      <h4 class="display-5">Select one of your playlists to get started.</h4>
    </div>
  </div>
</script>

Стиль. css

html,
body {
  height: 100%;
}

РЕДАКТИРОВАТЬ Спасибо всем за предложения, но многие из вас сказали, что я не должен в моих тегах нет тегов, но я пытаюсь следовать примеру, созданному Spotify. Их код встроен в индекс JS. html и использует такие рули:

Из своего индекса. html

<script id="user-profile-template" type="text/x-handlebars-template">
      <h1>Logged in as {{display_name}}</h1>
      <div class="media">
        <div class="pull-left">
          <img class="media-object" width="150" src="{{images.0.url}}" />
        </div>
        <div class="media-body">
          <dl class="dl-horizontal">
            <dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
            <dt>Id</dt><dd>{{id}}</dd>
            <dt>Email</dt><dd>{{email}}</dd>
            <dt>Spotify URI</dt><dd><a href="{{external_urls.spotify}}">{{external_urls.spotify}}</a></dd>
            <dt>Link</dt><dd><a href="{{href}}">{{href}}</a></dd>
            <dt>Profile Image</dt><dd class="clearfix"><a href="{{images.0.url}}">{{images.0.url}}</a></dd>
            <dt>Country</dt><dd>{{country}}</dd>
          </dl>
        </div>
      </div>
    </script>

Внизу их указателя. html

<script>
      (function() {

        /**
         * Obtains parameters from the hash of the URL
         * @return Object
         */
        function getHashParams() {
          ...
        }

        var userProfileSource = document.getElementById('user-profile-template').innerHTML,
            userProfileTemplate = Handlebars.compile(userProfileSource),
            userProfilePlaceholder = document.getElementById('user-profile');
    ...
            $.ajax({
                url: 'https://api.spotify.com/v1/me',
                headers: {
                  'Authorization': 'Bearer ' + access_token
                },
                success: function(response) {
                  userProfilePlaceholder.innerHTML = userProfileTemplate(response);

                  $('#login').hide();
                  $('#loggedin').show();
                }
            });
    ...
}

Ответы [ 2 ]

0 голосов
/ 28 марта 2020

Прежде всего, имейте в виду, что тег script не имеет права получать элемент div внутри него. Таким образом, ваши сценарии должны быть либо внутри вашего head, либо в нижней части элемента body, например: 

<head>
  ... //Stylesheets and other stuff
  <script src='somewhere/in/your/project/or/from/CDN' type='application/javascript'/>
</head>

или 

<body>
  ... //Your DOM elements
  <script src='somewhere/in/your/project/or/from/CDN' type='application/javascript'/>
</body>

Итак, наконец, Фактический код, который вы предоставляете, должен выглядеть следующим образом (я буду go с окончанием подхода тела, потому что он предпочтительнее всего): 

<div class="container h-100 d-flex justify-content-center">
   <div class="jumbotron my-auto text-center">
     <h1 class="display-4">Welcome, {{display_name}}.</h1>
     <h4 class="display-5">Select one of your playlists to get started.</h4>
   </div>
</div>

<script src='where/ever/it/should/be' type='text/x-handlebars-template'/>

Тогда как центрировать элемент div вообще ?

Есть несколько подходов, чтобы получить то, что вы хотели, и я выберу go с наиболее предпочтительным и простым (flexbox) .

Это можно сделать с помощью чистого CSS, как показано ниже:

Все, что вам нужно сделать, это дать 100vh (который заполнит высоту окна вашего окна) вашему основному div, что все ваши необходимые данные, завернутые в него. Затем вам нужно добавить display: flex; и другой его атрибут, такой как justify-content: center; (Это будет централизовать все ваши div в пределах выбранного по горизонтали) и align-items: center; (Это будет централизовать все ваши div в пределах выбранного по вертикали) . 

html,
body {
  height: 100%;
}

.flex-box {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jumbotron {
  text-align: center;
}
<div class="container flex-box">
  <div class="jumbotron">
    <h1 class="display-4">Welcome, {{display_name}}.</h1>
    <h4 class="display-5">Select one of your playlists to get started.</h4>
  </div>
</div>

Но так как я узнал, что вы также используете bootstrap, вы также можете сделать это с bootstrap следующим образом: 

html,
body {
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>


<body>
  <div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto text-center">
      <h1 class="display-4">Welcome, {{display_name}}.</h1>
      <h4 class="display-5">Select one of your playlists to get started.</h4>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 28 марта 2020

Если вы хотите сделать все это на одной странице, без импорта файла приложения. js файл будет выглядеть так, используя ваши divs

Затем вы можете вставить любой javascript между теги сценария. Если вы хотите, чтобы {display_name} был динамическим c входом, вам нужно создать функцию в теге скрипта, ссылающуюся на этот 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />
    <title>Spotify</title>
  </head>
  <body>
    <div class="container h-100 d-flex justify-content-center">
      <div class="jumbotron my-auto text-center">
        <h1 class="display-4">Welcome, {{display_name}}.</h1>
        <h4 class="display-5">Select one of your playlists to get started.</h4>
      </div>
    </div>
  <script>

  </script>
  </body>
</html>

Затем вы можете перемещать все элементы div и классы в вашем css

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...