どのように要素を重ねることができますか？

Question

だから私は4つのsvgイメージと段落をネストしたこの単純なフッター要素を持っています。

<img class="image1 svg" src="css/img/facebook.svg" alt="facebook_profile"> 
    <img class="image2 svg" src="css/img/tweeter.svg" alt="tweeter_profile"> 
    <img class="image3 svg" src="css/img/google-plus.svg" alt="google_plus_profile"> 
    <img class="image4 svg" src="css/img/skype.svg" alt="skype_account"> 

    <p class="copyright">&copy; 2017 Chirca Razvan</p> 

</footer> 

そして、これらは、それに適用されるスタイルです：

.svg { 
     width: 50px; 
     height: 50px; 
    } 

    .copyright { 
     display: block; 
     flex-basis: auto; 
     margin-left: 15px; 
     margin-right: 15px; 
    } 

    footer { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: center; 
     background: rgb(9, 28, 41); 
     padding: 30px 0; 
     text-align: center; 
    } 

an visual example

私はその段落は、それらの間にいくつかの領域で、画像の下に表示するようにしたいです。

Answer 1

段落にwidth: 100%を追加、または100%へautoからflex-basisを変更。

.svg { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.copyright { 
 
    display: block; 
 
    flex-basis: auto;/*change to 100%*/ 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
    color: #fff; 
 
width: 100%;/*or add this*/ 
 
} 
 

 
footer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    background: rgb(9, 28, 41); 
 
    padding: 30px 0; 
 
    text-align: center; 
 
}

<footer> 
 
    <img class="image1 svg" src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg" alt="facebook_profile"> 
 
    <img class="image2 svg" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg" alt="tweeter_profile"> 
 
    <img class="image3 svg" src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Logo_google%2B_2015.png" alt="google_plus_profile"> 
 
    <img class="image4 svg" src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skype-icon.svg" alt="skype_account"> 
 
    <p class="copyright">&copy; 2017 Chirca Razvan</p> 
 
</footer>

Answer 2

<div style="margin-bottom: 10px;"> 
    <img class="image1 svg" src="css/img/facebook.svg" alt="facebook_profile"> 
    <img class="image2 svg" src="css/img/tweeter.svg" alt="tweeter_profile"> 
    <img class="image3 svg" src="css/img/google-plus.svg" alt="google_plus_profile"> 
    <img class="image4 svg" src="css/img/skype.svg" alt="skype_account"> 
</div> 

<p class="copyright">&copy; 2017 Chirca Razvan</p>