时间戳

首页 > 解决方案 > 将网格居中到页面中心

javascript - 将网格居中到页面中心

问题描述

我正在尝试将此网格居中到页面的中心。有什么帮助吗？同样，在单击时不显示数字，id 更喜欢显示名称。因此，不是在单击 1 时显示数字 1，而是希望它显示 Car 或 Truck，因为最后我要将数字更改为图片。并希望它显示图片名称。

      $( function() {
        $( "#selectable" ).selectable({
          stop: function() {
            var result = $( "#select-result" ).empty();
            $( ".ui-selected", this ).each(function() {
              var index = $( "#selectable li" ).index( this );
              result.append( " " + ( index + 1 ) );
            });
          }
        });
      } );
      
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <style>
      #feedback { font-size: 1.4em; }
      #selectable .ui-selecting { background: #FECA40; }
      #selectable .ui-selected { background: #F39814; color: white; }
      #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
      #selectable li { margin: 10px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
   </style>
</head>
<body>
   <p id="feedback">
      <span>You've selected:</span> <span id="select-result">none</span>.
      </p>
      <ol id="selectable">
  <li class="ui-widget-content">1</li>
  <li class="ui-widget-content">2</li>
  <li class="ui-widget-content">3</li>
  <li class="ui-widget-content">4</li>
  <li class="ui-widget-content">5</li>
  <li class="ui-widget-content">6</li>
  <li class="ui-widget-content">7</li>
  <li class="ui-widget-content">8</li>
  <li class="ui-widget-content">9</li>
  <li class="ui-widget-content">10</li>
  <li class="ui-widget-content">11</li>
  <li class="ui-widget-content">12</li>
</ol>
</body>
</html>

标签： javascriptjqueryhtmlcss

解决方案

试试这段代码，它应该可以完美地完成工作

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <style>
         #feedback { font-size: 1.4em; }
         #selectable .ui-selecting { background: #FECA40; }
         #selectable .ui-selected { background: #F39814; color: white; }
         #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
         #selectable li { margin: 10px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
         .wrapper{    
         display: flex;
         margin: auto;
         justify-content: center;
         align-items: center;
         }
      </style>
   </head>
   <body>
      <div class="wrapper">
         <div>
            <p id="feedback">
               <span>You've selected:</span> <span id="select-result">none</span>.
            </p>
            <ol id="selectable">
               <li class="ui-widget-content" text="car">1</li>
               <li class="ui-widget-content" text="truck">2</li>
               <li class="ui-widget-content" text="car3">3</li>
               <li class="ui-widget-content" text="car4">4</li>
               <li class="ui-widget-content" text="car5">5</li>
               <li class="ui-widget-content" text="car6">6</li>
               <li class="ui-widget-content" text="car7">7</li>
               <li class="ui-widget-content" text="car8">8</li>
               <li class="ui-widget-content" text="car9">9</li>
               <li class="ui-widget-content" text="car10">10</li>
               <li class="ui-widget-content" text="car11">11</li>
               <li class="ui-widget-content" text="car12">12</li>
            </ol>
         </div>
      </div>
      <script>
         $("document").ready(function(){
           $(".ui-widget-content").on("click", function(){
               $("#select-result").text($(this).attr('text'));
           });
         });
      </script>
   </body>
</html>

推荐阅读