Question

我想将我的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>

任何帮助都将不胜感激。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

默认情况下，

填充和边距在锚标记中显示效果很好，因此在其中使用显示块

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

3 个答案: