Awesome5のアイコンとテキストの配置について

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>

dit.

2019/06/25 05:20

teratailには質問内のコードなどを見やすくするための仕組みがあります。 https://teratail.com/help/question-tips#questionTips3-5-1 質問は編集できますので、コードの部分を選択して<code>ボタンを押し、「ここに言語を入力」となっているところを「html」にしてください。具体的にはこういう書き方になります。 ```html ここにコード ```

kurobuta

2019/06/25 07:59

ありがとうございます。気おつけます。

行動規範の内容に同意します

回答2件

ベストアンサー

<br> は不要です。

CSS
1.item-1 {
2  flex-direction: column;
3}

https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

投稿2019/06/25 09:23

x_x

総合スコア13749

kurobuta

2019/06/26 04:05

IEでも上手く表示しました。ありがとうござました感謝いたします。。

行動規範の内容に同意します

まず<br>の使い方が間違っています。

html
1<div class="item-1"><i class="fas fa-hand-holding-heart iconbig"></i>test<br></div>

だとtestの後ろに改行を入れていることになります。
また今回のようなデザインにしたい場合、brではなくcssで調整するほうがよいかと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
7
8<style>
9
10main{
11display: flex;
12display: -webkit-flex;
13flex-wrap: wrap;
14-webkit-flex-wrap: wrap;
15box-sizing: border-box;
16overflow: hidden;
17width : 100%;
18padding : 10px;
19background: #fff;
20margin-bottom : 0px;
21justify-content: center;
22}
23
24.item-1{
25border-top-width : 1px;border-style : solid;border-color : #f1f1f1;
26width : 150px;
27height : 180px;
28margin: 20px;
29border-left-width : 1px;
30border-right-width : 1px;
31border-bottom-width : 1px;
32text-decoration: none;
33display:flex;
34-webkit-align-items: center;
35-webkit-justify-content: center; 
36align-items: center; /*上下中央*/
37justify-content: center; 
38position: relative;
39
40}
41
42.iconbig{
43font-size : 4em;
44}
45
46  span.str{
47    position: absolute;
48    bottom:30px;
49  }
50</style>
51
52</head>
53<body>
54<div id="main">
55<div class="item-1"><i class="fas fa-hand-holding-heart iconbig"></i><span class="str">test<span></div>
56</div>
57</body>
58</html>

html
1.item-1{
2    position: relative;
3}
4
5span.str{
6    position: absolute;
7    bottom:30px;
8  }

これらを追記しています。
item-1を親としてspan.strを設定しbottom:30pxで上下の位置を調整しています。

投稿2019/06/25 03:01

beginner_t

総合スコア716

kurobuta

2019/06/25 07:58

ありがとうございす。上手くできました感謝いたします。もう2点お聞きしたいのですが、アイコンを上下に任意で移動させたりするとこは出来るでしょうか？またIE10では右横にずれて表示しました。IEでも中央に表示するでしょうか？

beginner_t

2019/06/25 08:05

アイコンを上下に移動させたい場合は<i>に対してposition:absolute;を設定することで、topやbottomで調整が可能です。IE10でずれる場合は親要素に幅と高さを指定するとずれなくなったと思います。

kurobuta

2019/06/25 09:31

スミマセンまだまだ初心者なものであまりHTMLやCSSが上手く扱えません、お手数ですが具体的なソースを教えて頂けないでしょうか？よろしくお願いいたします。

beginner_t

2019/06/25 11:40

今回のやりたいことに対しての方法はいくつかあります。別の回答者様の方法でも実装できます。ヒントはかなりあるので自身で調べながら色々試してみてはどうでしょうか。flexを使うかpositionを使うのかは自由です。どちらでも実装できます。コピペだけでは初心者を脱却すすることはできないので頑張ってください。

kurobuta

2019/06/26 04:06

有難うございます。解決いたしました。

行動規範の内容に同意します

あなたの回答