Centering grid to the center of the page

Question

I'm trying to center this grid to the center of the page. Any help? Also instead of displaying the numbers when clicked, id like to display rather a name. So instead of displaying the number 1 when 1 is clicked, id like it to display Car, or Truck, cause in the end I'm going to change the numbers to pictures. And would want it to display the picture name.

      $( 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>

score 0 · Accepted Answer · answered Jan 30 '20 at 08:17

Try this code it should do the work perfectly

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

Hey OG, Glad it helped :) If you found my answer helpful then please upvote it and mark as the accepted answer. It would help me with my reputation on stackoverflow. — Pallavi Dwivedi, Jan 30 '20 at 11:22

score -2 · Answer 2 · answered Jan 30 '20 at 07:49

I normally use the Bootstrap Grid system to arrange my content.

<!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>
<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-8">
      <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>
    </div>
    <div class="col-sm-2"></div>
  </div>
</div>

   <script>
      $( 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 ) );
            });
          }
        });
      } );
      </script>
</body>
</html>

Here is the link for more examples: https://getbootstrap.com/docs/4.4/layout/grid/

Centering grid to the center of the page

2 Answers2