Awesome5のアイコンを上、その下にテキストを配置2段でBOXの中央に配置したいのですがテキストはアイコンの右横にしか表示しません。アイコンとテキストを<br>で改行させましたが上手くできません。2段で中央配置できる方法を教えて頂けないでしょうか?よろしくお願いいたします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <style> #main{ display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; box-sizing: border-box; overflow: hidden; width : 100%; padding : 10px; background: #fff; margin-bottom : 0px; justify-content: center; } .item-1{ border-top-width : 1px;border-style : solid;border-color : #f1f1f1; width : 150px; height : 180px; margin: 20px; border-left-width : 1px; border-right-width : 1px; border-bottom-width : 1px; text-decoration: none; display:flex; -webkit-align-items: center; -webkit-justify-content: center; align-items: center; /*上下中央*/ justify-content: center; } .iconbig{ font-size : 4em; } </style> </head> <body> <div id="main"> <div class="item-1"><i class="fas fa-hand-holding-heart iconbig"></i>test<br></div> </div> </body> </html>回答2件
あなたの回答
tips
プレビュー