Zentrierter Text und Bilder in der gleichen Zeile

Question

Ich mache eine Fußzeile für meine Website und fragte mich, ob es möglich ist, Text zentriert auf der Seite zu haben und ein paar Bilder auf der rechten Seite der Seite in der gleichen Zeile wie der Text.

Immer, wenn ich den Text mit text-align:center zentriere, werden die Bilder einfach in die Zeile darunter geschoben.

HTML:

<div class="footer"> 
    <hr id="break"> 
    <p id="credit">Created by:</p> 
    <a class="picture" id="linkedin" href="#" target="_blank"> 
     <img src="Pictures/linkedin.png" width="20px" height="20px"/> 
    </a> 
    <a class="picture" id="email" href="#" target="_top"> 
     <img src="Pictures/email.png" width="20px" height="20px"/> 
    </a> 
    <a class="picture" id="github" href="#" target="_blank"> 
     <img src="Pictures/github.png" width="40px" height="10.45px"/> 
    </a> 
</div> 

CSS:

#break { 
    margin:0; 
} 

.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:40px; 
    background-color:rgba(191,191,191,.65); 
} 

#credit { 
    float:left; 
    margin:0; 
    padding-top:10px; 
    padding-left:44%; 
    color:rgba(0,0,0,.5); 
} 

.picture { 
    padding-top:10px; 
    float:right; 
    margin:0; 
} 

#linkedin { 
    padding-right:50px; 
} 

#email { 
    padding-right:15px; 
} 

#github { 
    padding-right:15px; 
} 

Answer 1

Was ist das?

.footer { display: flex; flex-direction: row; justify-content: center;} 

Dadurch werden alle Bilder und der Text in der Mitte der Fußzeile ausgerichtet.

Wenn Sie Raum zwischen den Bildern und dieser Text versuchen:

.footer { display: flex; flex-direction: row; justify-content: space-around;} 

.footer > *{margin: auto; } 

Hoffe, es hilft.

Answer 2

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img { 
 
    display: block; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100vw; 
 
    height: 40px; 
 
    background-color: rgba(191, 191, 191, .65); 
 
    border-top: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 16px; 
 
    box-sizing: border-box; 
 
    justify-content: center; 
 
} 
 

 
#credit { 
 
    color: rgba(0, 0, 0, .5); 
 
} 
 

 
.footer a { 
 
    margin-left: 8px; 
 
}

<div class="footer"> 
 
    <p id="credit">Created by:</p> 
 
    <a class="picture" id="linkedin" href="#" target="_blank"> 
 
    <img src="http://beerhold.it/20/20"> 
 
    </a> 
 
    <a class="picture" id="email" href="#" target="_top"> 
 
    <img src="http://beerhold.it/20/20"> 
 
    </a> 
 
    <a class="picture" id="github" href="#" target="_blank"> 
 
    <img src="http://beerhold.it/40/10"> 
 
    </a> 
 
</div>

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img { 
 
    display: block; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100vw; 
 
    height: 40px; 
 
    background-color: rgba(191, 191, 191, .65); 
 
    border-top: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 16px; 
 
    box-sizing: border-box; 
 
} 
 

 
#credit { 
 
    color: rgba(0, 0, 0, .5); 
 
    flex: 100; 
 
} 
 

 
.footer a { 
 
    margin-left: 8px; 
 
}

<div class="footer"> 
 
    <p id="credit">Created by:</p> 
 
    <a class="picture" id="linkedin" href="#" target="_blank"> 
 
    <img src="http://beerhold.it/20/20"> 
 
    </a> 
 
    <a class="picture" id="email" href="#" target="_top"> 
 
    <img src="http://beerhold.it/20/20"> 
 
    </a> 
 
    <a class="picture" id="github" href="#" target="_blank"> 
 
    <img src="http://beerhold.it/40/10"> 
 
    </a> 
 
</div>