文本對齊：中心不適用於社交div

我想讓我的4個社交圖片（alt=test）位於我div的中心（現在他們出現在頂部中心）。我把放在.socials，但它不工作。我也試圖把它放在.socialdivs，但它也不起作用。 HTML和CSS代碼如下。文本對齊：中心不適用於社交div

.socials { 
 
    width: 100%; 
 
    background-color: #5e6066; 
 
    text-align: center; 
 
} 
 

 
.socialdivs { 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 

 
.fb { 
 
    display: inline-block; 
 
    width: 250px; 
 
    height: 155px; 
 
    margin: auto; 
 
} 
 

 
.fb:hover { 
 
    background-color: #4668b3; 
 
} 
 

 
.lin { 
 
    display: inline-block; 
 
    width: 250px; 
 
    height: 155px; 
 
    margin-top: auto; 
 
} 
 

 
.lin:hover { 
 
    background-color: #00a0dc; 
 
} 
 

 
.insta { 
 
    display: inline-block; 
 
    width: 250px; 
 
    height: 155px; 
 
    margin: auto; 
 
} 
 

 
.insta:hover { 
 
    background-color: #405de6; 
 
} 
 

 
.golden { 
 
    display: inline-block; 
 
    width: 250px; 
 
    height: 155px; 
 
    margin: auto; 
 
} 
 

 
.golden:hover { 
 
    background-color: #fcbf17; 
 
} 
 

 
.info { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    padding: 20px; 
 
}

<footer> 
 
    <div class="socials"> 
 
    <div class="socialdivs"> 
 
     <div class="fb"> 
 
     <a href="https://www.facebook.com" target="_blank"><img src="img/facebook.png" alt="test" /></a> 
 
     </div> 
 
     <div class="lin"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="img/linkedin.png" alt="test" /></a> 
 
     </div> 
 
     <div class="insta"> 
 
     <a href="https://www.instagram.com" target="_blank"><img src="img/instagram.png" alt="test" /></a> 
 
     </div> 
 
     <div class="golden"> 
 
     <a href="https://www.goldenline.pl" target="_blank"><img src="img/goldenline.png" alt="test" /></a> 
 
     </div> 
 
     <div style="clear:both"></div> 
 
    </div> 
 
    </div> 
 
    <div class="info"> 
 
    Adrian &copy; 2017 Thank you for your visit! 
 
    </div> 
 
</footer>

任何幫助，將不勝感激。

來源

2017-10-17 Adrian

「text-align」僅適用於「inline」或「inline-block」元素。 html div默認爲「block」。 –

這個東西會在你的案例**頂端：50％;位置：相對; **把這個CSS放在錨標籤，看看會發生什麼 – LSKhan

您可以使用line-height: 155px;垂直居中。它需要與容器具有相同的高度。所以，當容器的高度發生變化時，需要調整行高。

.socials 
 
{ 
 
\t width:100%; 
 
\t background-color: #5e6066; 
 
\t text-align: center; 
 
    line-height: 155px; 
 
} 
 

 
.socialdivs 
 
{ 
 
\t width: 100%; 
 
\t margin: auto; 
 
} 
 

 
.fb 
 
{ 
 
\t display: inline-block; 
 
\t width: 250px; 
 
\t height: 155px; 
 
\t margin: auto; 
 
} 
 

 
.fb:hover 
 
{ 
 
\t background-color: #4668b3; 
 
} 
 

 
.lin 
 
{ 
 
\t display: inline-block; 
 
\t width: 250px; 
 
\t height: 155px; 
 
\t margin-top: auto; 
 
} 
 

 
.lin:hover 
 
{ 
 
\t background-color: #00a0dc; 
 
} 
 

 
.insta 
 
{ 
 
\t display: inline-block; 
 
\t width: 250px; 
 
\t height: 155px; 
 
\t margin: auto; 
 
} 
 

 
.insta:hover 
 
{ 
 
\t background-color: #405de6; 
 
} 
 

 
.golden 
 
{ 
 
\t display: inline-block; 
 
\t width: 250px; 
 
\t height: 155px; 
 
\t margin: auto; 
 
} 
 

 
.golden:hover 
 
{ 
 
\t background-color: #fcbf17; 
 
} 
 

 
.info 
 
{ 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t text-align: center; 
 
\t padding: 20px; 
 
}

<!DOCTYPE HTML> 
 
<html lang="en"> 
 
    <head> 
 
      <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 

 
    </body> 
 
    <footer> 
 
     <div class="socials"> 
 
\t \t \t <div class="socialdivs"> 
 
\t \t \t \t <div class="fb"> 
 
\t \t \t \t \t <a href="https://www.facebook.com" target="_blank"><img src="img/facebook.png" alt="test" /></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="lin"> 
 
\t \t \t \t \t <a href="https://www.linkedin.com" target="_blank"><img src="img/linkedin.png" alt="test" /></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="insta"> 
 
\t \t \t \t \t <a href="https://www.instagram.com" target="_blank"><img src="img/instagram.png" alt="test" /></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="golden"> 
 
\t \t \t \t \t <a href="https://www.goldenline.pl" target="_blank"><img src="img/goldenline.png" alt="test" /></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div style="clear:both"></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="info"> 
 
\t \t \t Adrian &copy; 2017 Thank you for your visit! 
 
\t \t </div> 
 
    </footer> 
 
</html>

來源

2017-10-17 18:59:30 AMartinNo1

這幾乎是我想要的，但圖片仍然不在中間：https： //ibb.co/f9aqAm – Adrian

您可以使用padding像這樣設置文本在DIV的中間，（連同text-align:center;）：

.socialdivs 
{ 
    padding: 10%; 
    font-size: 18px; 
    text-align:center; 
    width:20%; 
}

來源

2017-10-17 19:09:05

我已經試過了這段代碼，這是發生了什麼：https：//ibb.co/mv62O6我需要保持它在1行 – Adrian

空白和邊距默認顯示效果良好錨定標記以便使用它中的顯示塊

來源

2017-10-17 19:26:08 habib

文本對齊：中心不適用於社交div

回答

相關問題