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

【问题标题】：Text-align: center doesn't work for social divs文本对齐：中心不适用于社交 div
【发布时间】：2018-03-29 13:36:22
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

text-align 仅适用于 inline 或 inline-block 元素。 html div 默认为block。
这个东西在你的情况下会起作用 top: 50%;position: relative; 把这个 css 放在锚标签上，看看会发生什么

标签： html css centering

【解决方案1】：

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

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

【讨论】：

这几乎是我想要的，但图片仍然不在中间：ibb.co/f9aqAm

【解决方案2】：

你可以使用padding在div中间设置文本，（连同text-align:center;）像这样：

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

【讨论】：

我已经尝试了代码，结果如下：ibb.co/mv62O6 我需要将其保留在 1 行中

【解决方案3】：

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

【讨论】：