Ich kann Social Media-Symbole in der Fußzeile nicht zentrieren

Question

Ich bin seit über 2 Tagen auf einem Problem festgefahren, und ich muss um Hilfe bitten. Bei Desktop-Browsern sollen die Symbole linksbündig ausgerichtet sein und in mobilen Browsern sollen sie zentriert werden.

Hier ist die Website so weit.

Inspect Site Here

Ich habe eine Website erstellt, auf der das Layout von gestapelten Abschnitten besteht, wo Höhen- und Breitenwerte der einzelnen Abschnitte sind VH Prozentsätze definiert unter Verwendung eines spezifischen Layout zu erhalten.

Dies ist ein Beispiel dafür, wie ein Abschnitt im CSS definiert ist.

.content3 { 
height: 100vh; 
width: 100%; 
display: table; 
background: #FFFFFF url('../img/chair.png') no-repeat center center; 
background-size: 60%; 
} 

Hier ist, wie ich die Fußzeile CSS definiert. Hier

.footer { 
height: 40vh; 
width: 100%; 
background: #312D3B; 
} 

ist der HTML-Code für die .footer

<section class="footer"> 
<div class="Social"> 
    <img class="icons" src="img/dribbble.svg"> 
    <img class="icons2" src="img/twitter.svg"> 
    <img class="icons3" src="img/instagram.svg"> 
</div> 

Hier ist die CSS für die .Social Klasse

.Social { 
height: 100%; 
float: left; 
position: relative; 
} 

Hier ist die CSS für die .icons Klasse

.icons { 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding-left: 3.5em; 
    } 

Hier ist die CSS für die .icons2 Klasse

.icons2 { 
    bottom: 0; 
    left: 4.5em; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding-left: 3.5em; 
    } 

Hier ist die CSS für die Klasse

icons3 ist

.icons3 { 
    bottom: 0; 
    left: 9em; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding-left: 3.5em; 
    } 

Bitte helfen. Dies ist meine erste Frage auf dieser Seite.

Answer 1

Sie können flexbox verwenden, um Sie bei diesem Problem zu helfen, ersetzen Sie einfach Stil.CSS-Code mit diesem

CSS:

/* -------------------------------- 

Primary style 

-------------------------------- */ 
*, *::after, *::before { 
    box-sizing: border-box; 
} 

body { 
    font-family: sans-serif; 
    line-height: 1; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    background: #1C1D21; 
} 

/* -------------------------------- 

Final project 

-------------------------------- */ 

main { 
    position: relative; 
    z-index: 1; 
    height: 100vh; 
    overflow: hidden; 
    box-shadow: 0 0 50px #000; 
    transition: transform .5s; 
} 

.nav-open main { 
    transform: scale(.8); 
} 

.intro { 
    height: 90vh; 
    width: 100%; 
    display: table; 
    background: #FCC732 url('../img/WatchByMaz2.png') no-repeat center center; 
    background-size: 90%; 
} 

.content { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #FFFFFF url('../img/OculusConsumerByMaz.png') no-repeat center center; 
    background-size: 90%; 
} 

.content2 { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #FCC732 url('../img/speedingAppByMaz.png') no-repeat center center; 
    background-size: 90%; 
} 

.content3 { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #FFFFFF url('../img/chair.png') no-repeat center center; 
    background-size: 60%; 
} 

.footer { 
    height: 40vh; 
    width: 100%; 
    background: #312D3B; 

} 

.main-header { 
    position: relavtive; 
    background: #fff; 
    width: 100%; 
    top: 0; 

} 

section .center { 
    display: table-cell; 
    vertical-align: bottom; 
    text-align: center; 
    padding-bottom: 4em; 
} 

.btn { 
    -webkit-border-radius: 28; 
    -moz-border-radius: 28; 
    border-radius: 28px; 
    font-family: 'lulo_cleanone' , Arial, sans-serif; 
    color: #312D3B; 
    font-size: 16px; 
    padding: 10px 20px 10px 20px; 
    border: solid #312D3B 2px; 
    text-decoration: none; 
} 

.btn:hover { 
    text-decoration: none; 
} 

.logo { 
    position: fixed; 
    z-index: 1; 
    top: 43px; 
    left: 44px; 
    white-space: nowrap; 
} 

h1 { 
    font-family: 'lulo_cleanone_bold' , Arial, sans-serif; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    font-size: 90px; 
    color: #312D3B; 
} 

.nav-trigger { 
    position: fixed; 
    z-index: 4; 
    top: 40px; 
    right: 46px; 
    height: 44px; 
    width: 44px; 
    overflow: hidden; 
    color: transparent; 
    white-space: nowrap; 
    text-indent: 100%; 
} 

.nav-trigger span, 
.nav-trigger span::before, 
.nav-trigger span::after { 
    position: absolute; 
    height: 4px; 
    width: 40px; 
    background: #000000; 
} 

.nav-trigger span { 
    width: 29px; 
} 

.nav-trigger span { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    transition: background .3s; 
} 

.nav-trigger span::before, 
.nav-trigger span::after { 
    content: ''; 
    top: 0; 
    left: 0; 
    transition: background .3s, transform .3s; 
} 

.nav-trigger span::before { 
    transform: translateY(-12px); 
} 

.nav-trigger span::after { 
    transform: translateY(12px); 
} 

.nav-trigger:hover span, 
.nav-trigger:hover span::before, 
.nav-trigger:hover span::after { 
    background: #000000; 
} 

.nav-open .nav-trigger span { 
    background: transparent; 
} 

.nav-open .nav-trigger span::before, 
.nav-open .nav-trigger span::after { 
    background: #FFFFFF; 
} 

.nav-open .nav-trigger span::before { 
    transform: rotate(-45deg); 
} 

.nav-open .nav-trigger span::after { 
    transform: rotate(45deg); 
} 

.overlay { 
    position: fixed; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #1C1D21; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .5s, visibility .5s; 
} 

.nav-open .overlay { 
    opacity: .6; 
    visibility: visible; 

} 

.nav-container { 
    position: fixed; 
    z-index: 3; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width: 90%; 
    max-width: 460px; 
    padding: 2em 3.5em; 
    background: #312D3B; 
    overflow: hidden; 
    transform: translateZ(0); 
    transform: translateX(100%); 
    transition: transform .5s cubic-bezier(.07,.23,.34,1); 
} 

.nav-open .nav-container { 
    transform: translateX(0); 
} 

.nav-container h2 { 
    font-size: 12px; 
    font-family: 'lulo_cleanone' , Arial, sans-serif; 
    text-transform: uppercase; 
    color: #AAAAAA; 
    margin: 2.3em 0; 
} 

.nav { 
    list-style: none; 
    padding: 0; 
} 

.nav a { 
    display: block; 
    padding: .4em 0; 
    font-size: 30px; 
    font-weight: bold; 
    font-family: 'lulo_cleanone' , Arial, sans-serif; 
    text-decoration: none; 
    color: #FFFFFF; 
    transform: translateZ(0); 
} 

.nav-open .nav a { 
    animation: slide-in .4s .2s backwards; 
} 

.nav-open .nav li:nth-of-type(2) a { 
    animation-delay: .3s; 
} 

.nav-open .nav li:nth-of-type(3) a { 
    animation-delay: .4s; 
} 

.nav-open .nav li:nth-of-type(4) a { 
    animation-delay: .5s; 
} 

.nav-open .nav li:nth-of-type(5) a { 
    animation-delay: .6s; 
} 

@keyframes slide-in { 
    0% { 
     opacity: 0; 
     transform: translateX(80px); 
    } 

    100% { 
     opacity: 1; 
     transform: translateX(0); 
    } 
} 


.Social { 

    height: 100%; 
    display: flex; 
    justify-content: space-between; 
    width: 60%; 
    margin: 0 auto; 


} 

.icons { 


} 

.icons2 { 

     padding-left: 5.5em; 
} 

.icons3 { 

     padding-left: 6em; 
} 





.portfolio_nav { 
    height: 20vh; 
    width: 100%; 
    background: #312D3B; 
} 

.left_tab { 
    width: 49%; 
    height:100%; 
    background: #312D3B; 
    float: left; 
    position: relative; 
} 

.right_tab { 
    width: 49%; 
    height:100%; 
    background: #FFC600; 
    float: right; 
    position: relative; 
} 

.arrow { 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

.middle2 { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 

} 

@font-face { 
    font-family: 'lulo_cleanone_bold'; 
    src: url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.eot'); 
    src: url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.woff2') format('woff2'), 
     url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.woff') format('woff'), 
     url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.ttf') format('truetype'), 
     url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.svg#lulo_cleanone_bold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 




@font-face { 
    font-family: 'lulo_cleanone'; 
    src: url('../yellow_design_studio_-_lulo_clean_one-webfont.eot'); 
    src: url('../yellow_design_studio_-_lulo_clean_one-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../yellow_design_studio_-_lulo_clean_one-webfont.woff2') format('woff2'), 
     url('../yellow_design_studio_-_lulo_clean_one-webfont.woff') format('woff'), 
     url('../yellow_design_studio_-_lulo_clean_one-webfont.ttf') format('truetype'), 
     url('../yellow_design_studio_-_lulo_clean_one-webfont.svg#lulo_cleanone') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 


/* -------------------------------- 

Desktop Media Queries 

-------------------------------- */ 

@media screen and (min-width: 700px) { 

.intro { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #FCC732 url('../img/WatchByMaz2.png') no-repeat center center; 
    background-size: 60%; 
} 


.content { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #F6F3F3 url('../img/OculusConsumerByMaz.png') no-repeat center center; 
    background-size: 60%; 
} 


.content2 { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #FCC732 url('../img/speedingAppByMaz.png') no-repeat center center; 
    background-size: 60%; 
} 

.content3 { 
    height: 100vh; 
    width: 100%; 
    display: table; 
    background: #FFFFFF url('../img/chair.png') center no-repeat; 
    background-size: 30%; 
} 

.Social { 
    display: flex; 
    justify-content: space-around; 
    height: 100%; 
    width: 30%; 
    margin: 0 auto; 

} 

.icons { 


} 

.icons2 { 

     padding-left: 3.5em; 
} 

.icons3 { 

     padding-left: 3.5em; 
} 

Answer 2

Hier ist ein Weg, es zu tun. Entfernen Sie alle absolute Positionen von .icon, .icon2 und .icon3

Fügen Sie diesen Code auf dem Desktop:

.Social { 
    height: 100%; 
    float: left; 
    position: relative; 
    width: 100%; 
    text-align: left; 
    line-height: 40vh; 
} 

Und dieser Code auf Mobile mit einem Media-Abfrage zum Beispiel:

@media (max-width: 640px) { 
    .Social { 
    text-align: center; 
    } 
} 

ändern padding-left Werte für mobile wie dieses:

.icons { padding-left: 1em; } 
.icons2 { padding-left: 1em; } 
.icons3 { padding-left: 1em; } 

Und halten padding-left Werte für den Desktop wie dies zum Beispiel:

.icons { padding-left: 3.5em; } 
.icons2 { padding-left: 3.5em; } 
.icons3 { padding-left: 3.5em; } 

Ich habe es getestet, es sollte funktioniert.