文本对齐：中心不适用于社交 div

我想把我的 4 张社交图片（ alt=test ）放在我的div 的中心（现在它们出现在顶部中心）。我把text-align: center放进.socials但它不起作用。我也试图把它放在.socialdivs但它也不起作用。HTML 和 CSS 代码如下。

.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>

任何帮助将不胜感激。

您可以使用

line-height: 155px;将其垂直居中。它需要具有与容器相同的高度。因此，当容器的高度发生变化时，需要调整线高。

.socials
{
	width:100%;
	background-color: #5e6066;
	text-align: center;
    line-height: 155px;
}
.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;
}

<!DOCTYPE HTML>
<html lang="en">
    <head>
            <link rel="stylesheet" href="style.css">
    </head>
    <body>
    </body>
    <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>
</html>

您可以使用padding在div中间设置文本，（连同text-align:center;），如下所示：

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

默认情况下填充和边距在锚标记中显示良好的结果，因此在其中使用显示块

相关内容

最新更新

热门标签：