HTMLでホームページを作っているのですが、画面を狭くしたときに、liの要素が中央寄せに出来なくて困っております。
レスポンシブで要素が1つしかない時に、中央寄せにしたいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" type="text/css" href="style.css" /> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7 <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> 8</head> 9 10<body> 11 <div class="header-box"> 12 <ul id="btns"> 13 <li data-group="all" class="active btn">ALL</li> 14 <li data-group="a" class="btn">A</li> 15 <li data-group="b" class="btn">B</li> 16 <li data-group="other" class="btn">OTHER</li> 17 </ul> 18 </div> 19 20 <section class="works"> 21 <ul id="sortlist"> 22 <li data-groups='["other","all"]'> 23 <div class="work-title">1</div> 24 <p class="work-message">Lorem </p> 25 </li> 26 27 <li data-groups='["other","all"]'> 28 <div class="work-title">2</div> 29 <p class="work-message">Lorem </p> 30 </li> 31 32 <li data-groups='["other","all"]'> 33 <div class="work-title">3</div> 34 <p class="work-message">Lorem </p> 35 </li> 36 37 <li data-groups='["b","all"]'> 38 <div class="work-title">4</div> 39 <p class="work-message">Lorem </p> 40 </li> 41 42 <li data-groups='["b","all"]'> 43 <div class=" work-title">5</div> 44 <p class="work-message">Lorem </p> 45 </li> 46 47 <li data-groups='["a","all"]'> 48 <div class=" work-title tag">6</div> 49 <p class="work-message">Lorem </p> 50 </li> 51 52 <li data-groups='["a","all"]'> 53 <div class="work-title tag">7</div> 54 <p class="work-message">Lorem </p> 55 </li> 56 </ul> 57 </section> 58 59 <script src="js/shuffle.min.js"></script> 60 <script> 61 $(function() { 62 $('#btns li').on('click', function() { 63 var $this = $(this), 64 $grid = $('#sortlist'); 65 $grid.shuffle($this.data('group')); 66 }); 67 68 $('#sortlist').shuffle({ 69 group: 'all', 70 speed: 700, 71 easing: 'ease-in-out' 72 }); 73 }); 74 75 </script> 76</body></html> 77
css
1@charset "utf-8"; 2 3body { 4 color: #666666; 5 width: 100%; 6 max-width: 1120px; 7 margin: 0 auto; 8} 9 10.btn { 11 display: inline-block; 12 width: 150px; 13 height: 36px; 14 background-color: #eee; 15 text-align: center; 16 line-height: 36px; 17} 18 19.header-box { 20 position: relative; 21} 22 23#btns { 24 position: absolute; 25 top: 20px; 26 right: 0; 27} 28 29.works{ 30 padding-top: 100px; 31} 32 33#sortlist li { 34 background-color: #eee; 35 margin: 30px; 36 list-style:none; 37 width: 330px; 38 height: 330px; 39 border-radius: 20px; 40} 41 42.work-title { 43 padding-top: 100px; 44 text-align: center; 45 font-weight: bold; 46}
現行バージョンではshuffle.jsが動かなかった為
古いバージョンを使わせてもらっております。
こちらのリンクと同じshuffle.min.js持ってきました。
コードが長い為リンクを貼っています。
shuffle.jsのデモ
683px以下や2つ並んでいる時、中央寄せにしたいのですが、やり方がわかりません。
marginやtext-alignでは上手く出来ませんでした。
liの要素は出来ることなら収縮させずに実現したいと思っております。
初心者のため、汚いコードですがご教授していただけたら助かります。