同じ行にテキストと写真を配置

Question

自分のサイトのフッターを作成していますが、ページの中央にテキストを配置して、ページの右側にテキスト

text-align:centerを使用してテキストの中央に配置すると、写真は下の行にプッシュダウンされます。

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

何？

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

これは、フッターの中央にあるすべての画像とテキストを整列します。

あなたがイメージとテキストの間にスペースが必要な場合は、これを試してみてください。

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

.footer > *{margin: auto; } 

それがお役に立てば幸いです。

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>