コードは下の方にあります。
これなんですが、よく見ると右側に偏っています。
これを中央に揃えられそうでしょうか?
よろしくお願いいたします。
(回答される方にはありがたく思っておりますが、paddingやmarginで最適な数値を入れてください、という回答ではなく、ブラウザの幅に依存しない対策をご教示いただきたいと考えております。)
HTML
1<style> 2.li_1:before{ 3 content: '197.'; 4 padding-right: 30px; 5 font-size: 40px; 6 color: #ddd; 7} 8.li_2:before{ 9 content: '260.'; 10 padding-right: 30px; 11 font-size: 40px; 12 color: #ddd; 13} 14.li_3:before{ 15 content: '443.'; 16 padding-right: 30px; 17 font-size: 40px; 18 color: #ddd; 19} 20.li_4:before{ 21 content: '199.'; 22 padding-right: 30px; 23 font-size: 40px; 24 color: #ddd; 25} 26html { 27 background-color: #000000; 28} 29 30div.container { 31 display: flex; 32 justify-content: center; 33} 34 35div.nested { 36 display: inline-block; 37} 38 39span { 40 display: block; 41} 42 43div.outer { 44 display: inline-block; 45 vertical-align: middle; 46} 47 48ul, ol { 49 float: left; 50 position: relative; 51 left: 50%; 52} 53 54ol { 55 list-style: none; 56} 57 58li { 59 position: relative; 60 left: -50%; 61 padding-left: 30px; 62} 63</style> 64<div class = "container"> 65 <div> 66 <ol> 67 <li class="li_1"> 68 <div class="outer" style="text-align: center;"> 69 <div class="nested"> 70 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-1">青鈍</span> 71 </div> 72 </div> 73 </li> 74 <li class="li_2"> 75 <div class="outer" style="text-align: center;"> 76 <div class="nested"> 77 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-2">江戸紫</span> 78 </div> 79 </div> 80 </li> 81 <li class="li_3"> 82 <div class="outer" style="text-align: center;"> 83 <div class="nested"> 84 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-3">葡萄茶</span> 85 </div> 86 </div> 87 </li> 88 <li class="li_4"> 89 <div class="outer" style="text-align: center;"> 90 <div class="nested"> 91 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-4">空色</span> 92 </div> 93 </div> 94 </li> 95 </ol> 96 </div> 97</div> 98 99<div style="color:white;text-align:center;"> 100中<br/>央<br/>点 101</div>
回答1件
あなたの回答
tips
プレビュー