無法將社交媒體圖標集中在頁腳中

我一直在遇到問題超過2天，因此需要尋求幫助。在桌面瀏覽器上，這些圖標應該左對齊，並且在移動瀏覽器中，它們都是中心對齊的。無法將社交媒體圖標集中在頁腳中

這是該網站到目前爲止。

我已經創建了一個網站，佈局由層疊部分，其中高度和每個部分的寬度值使用VH百分比定義爲獲得特定的佈局。

這是如何在CSS中定義節的示例。

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

這是我如何定義頁腳的CSS。

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

下面是.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>

這裏的HTML是爲。社會類

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

這裏的CSS是爲.icons的CSS

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

下面是.icons2類

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

的CSS下面是icons3類

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

請幫助的CSS。這是我在這個網站上的第一個問題。

來源

2016-04-02 Adam Mazurick

您應該使用媒體查詢了點。 https://css-tricks.com/css-media-queries/ – ketan

您可以使用flexbox來幫助您解決此問題，只需替換樣式即可。CSS代碼與這一個

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; 
}

來源

2016-04-02 12:40:31

這是最有效的解決方案。它工作完美。我只是增加了em尺寸，因爲當我在iPhone Safari模擬器中測試時，按鈕很小。我真的很感謝你的幫助。這個網站太棒了。 –

很高興它工作:)嘗試瞭解更多的Flexbox，你會驚訝於如何輕鬆地創建超級網站。[教程]（https://css-tricks.com/snippets/css/a-guide-to-flexbox /）。也不要添加任何填充到第一個圖標，因爲它會將所有內容都推向右側。 –

順便說一句，不要忘記標記這個答案是正確的，只需點擊我的答案中的向上箭頭 –

這裏有一個辦法做到這一點。刪除的.icon, .icon2和.icon3

所有absolute位置添加該代碼在桌面上：

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

而這種代碼在移動設備上使用，例如媒體查詢：

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

變化對於像移動padding-left值這個：

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

桌面這樣的例如210個

並保持padding-left值：

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

我測試過它，它應該工作。

來源

2016-04-02 11:59:13

無法將社交媒體圖標集中在頁腳中

回答

相關問題