実現したいこと
下部にある、【ボタン：レシピ一覧をみる】を真ん中に持ってきたいです。
発生している問題・分からないこと
初心者です。該当のボタンが左によってます。
エラーメッセージ
error
1エラーメッセージは、なし
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Recipe Diary</title>7 <meta name="viewport" content="width=device-width, initial-scale=1">8 <link rel="icon" href="img/favicon.ico">9 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">10 <link rel="stylesheet" href="css/style.css">11</head>12 13<body>14 <main>15 <div class="main-visual">16 <img src="img/mainvisual.jpg">17 </div>18 19 <div class="text-container">20 <h1 class="recipe-title">Recipe Diary</h1>21 <p>日々の料理のレシピをまとめています。<br>22 和食や洋食、中華、お菓子までいろいろなレシピをアップしていますので<br>23 皆さんの献立に役立ててくださいね！<br>24 </p>25 </div>26 27 <ul class="photo-container">28 <li><img src="img/recipe1.jpg" alt="料理1"></li>29 <li><img src="img/recipe2.jpg" alt="料理2"></li>30 <li><img src="img/recipe3.jpg" alt="料理3"></li>31 </ul>32 33 <div class="text">34 <a class="btn" href="#">レシピ一覧を見る</a>35 </div>36 37 </main> 38 39<div class="footer">40 <ul class="sns">41 <li><a href="#">Instagram</a></li>42 <li><a href="#">Twitter</a></li>43 <li><a href="#">Facebook</a></li>44 </ul>45 <p>© 2021 Recipe Diary</p>46</div>47 48</body>49</html>
CSS
1@charset "UTF-8";2html {3 font-size: 100%;4 }5 6img {7 max-width: 100%;8 }9 10ul {11 list-style: none;12 }13 14a {15 color:#2b2a27;16 }17 18 19.main-visual img {20 width: 100%;21 height: 100vh;22 object-fit: cover;23 margin-bottom: 80px;24 25 }26 27.text-container {28 text-align: center;29 padding: 0 20px;30 margin-bottom: 80px;31 }32 33.text-container .recipe-title{34 margin-bottom: 20px;35 }36 37.photo-container{38 display: flex;39 margin-bottom: 60px;40 }41 42.photo-container li{43 width: calc(100%/3);44 }45 46.photo-container li img{47 width: 100%;48 height: 500px;49 object-fit: cover;50 vertical-align: bottom;51 }52 53.recipe .button{54 display: inline-block;55 border: solid 1px #2b2a27;56 font-size: 0.875rem;57 padding: 18px 60px;58 text-decoration: none; 59 }60 61.footer{62 font-size: 0.75rem;63 padding: 20px;64 text-align: center; 65 }66 67.footer .sns {68 display: flex;69 justify-content: center;70 margin-bottom: 20px;71 }72 73.footer .sns li {74 margin: 0 10px;75 }
試したこと・調べたこと
上記の詳細・結果
該当の回答がありませんでした。
補足
特になし
0 コメント