文本在中间不对齐[重复]答案

【问题标题】：Text doesn't align in the middle [duplicate]文本在中间不对齐[重复]
【发布时间】：2019-08-25 18:48:20
【问题描述】：

我想重新创建这样的东西：

然后我会将它用于社交媒体和外部网站 :) 这就是我能想到的：

如你所见，这里有两个问题：

图片不适合 div。
文本不在中间。

我想如果我可以将文本对齐到中心，图片也会自动适应，但我似乎无法做到。

这是我写的代码：

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: table-cell;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/github.ico' %}">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

我认为vertical-align: middle; 和text-align: center; 这两行会使文本居中，但事实并非如此。

【问题讨论】：

标签： html css

【解决方案1】：

要垂直对齐文本，您需要将vertical-align: middle; 放在img 标记上。

关于图片不适合div，您还需要将border-radius设置为图片。

a img {
  vertical-align: middle;
  border-radius: 32px;
}

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: inline-block;
  background: #ccc;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
  margin-right: 4px;
}

.external-links img {
  vertical-align: middle;
  border-radius: 32px;
  margin-left: -2px;
}

.external-links span {
  margin-right: 5px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-github-m.png">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-twitter-m.png">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-stackoverflow-m.png">
    <span>stackoverflow</span>
  </a>
</div>

除了上述之外，我还对 sn-p 做了一些小改动（比如将显示更改为 inline-block 并更改了一些边距）以使结果看起来更好一些。

【讨论】：

终于！谢谢你:)

【解决方案2】：

将以下内容添加到您的 css 中：

.external-links img {
    vertical-align: middle;
}
.external-links span {
    vertical-align: middle;
}

【讨论】：

【解决方案3】：

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: inline-flex;
  background: #ccc;
  align-items: center;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 10px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/github.ico' %}">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

删除 display:table-cell 和 vertical-align:middle 并在 .external-links 类中添加 display:inline-flex 和 align-items:center。另外，我添加了 padding:10px 以便更好地理解。

.external-links {
    display: inline-flex;
    align-items: center;
}

如果你不想添加 flex 概念，你可以试试下面的结果。

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: table-cell;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 10px;
}

img {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/github.ico' %}">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

【讨论】：

【解决方案4】：

只需将 .external-links 中的显示改为 display: inline-flex;

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: inline-flex;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 5px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="https://lh4.googleusercontent.com/proxy/ddMp9taDBd8rd8jGiHnrO9QkBszt6vtsyutg9qZRxx-9my7zDQGRoOiam-fLPgN5aup5GlFIu1a1qe-HiLEPQYsKBC_394istidTekfjsd6l6iHsuQ0dHyVDtEmC_FPdQ8qLNyaRKgegP9IkIw02ZwKzoX73WwEir8PnbRl9NgV1-qRnVg=w1200-h630-p-k-no-nu">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="https://lh4.googleusercontent.com/proxy/ddMp9taDBd8rd8jGiHnrO9QkBszt6vtsyutg9qZRxx-9my7zDQGRoOiam-fLPgN5aup5GlFIu1a1qe-HiLEPQYsKBC_394istidTekfjsd6l6iHsuQ0dHyVDtEmC_FPdQ8qLNyaRKgegP9IkIw02ZwKzoX73WwEir8PnbRl9NgV1-qRnVg=w1200-h630-p-k-no-nu">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="https://lh4.googleusercontent.com/proxy/ddMp9taDBd8rd8jGiHnrO9QkBszt6vtsyutg9qZRxx-9my7zDQGRoOiam-fLPgN5aup5GlFIu1a1qe-HiLEPQYsKBC_394istidTekfjsd6l6iHsuQ0dHyVDtEmC_FPdQ8qLNyaRKgegP9IkIw02ZwKzoX73WwEir8PnbRl9NgV1-qRnVg=w1200-h630-p-k-no-nu">
    <span>stackoverflow</span>
  </a>
</div>

【讨论】：

【解决方案5】：

您正在寻找line-height 属性，如果您给它赋予与height 属性相同的值，您将获得垂直居中的文本。

试试这个：

.child {
  height: 250px;
  margin: 20px
}

.external-links {
  padding: 1px;
  display: table-cell;
  background: #CCC;
  vertical-align: middle;
  line-height: 250px;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
}

您还可以使用 display 属性的 inline-block 值并排对齐按钮。

.child {
  height: 250px;
  margin: 20px
}

.external-links {
  padding: 1px;
  display: inline-block;
  background: #CCC;
  vertical-align: middle;
  line-height: 250px;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
}

【讨论】：

【解决方案6】：

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: inline-flex;
  align-items: center;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding-right: 0.7em;
  
}
.external-links img {   
    width: 2em;
    height: 2em;
}
.external-links span {   
    padding-left: 0.5em;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_github-512.png">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

你可以试试这个，我在 .external-links 和 .external-links span 中添加了新的 css 以满足你的要求

【讨论】：

【解决方案7】：

将display: flex; 添加到 .child 和 .external-links 和

.external-links{justify-content: center;
  padding: 10px;
  align-items: center;
  margin: 5px;}

.child {
  margin: 20px;
  display: flex;
}

.external-links {
  display: flex;
  background: #ccc;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  justify-content: center;
  padding: 10px;
  align-items: center;
  margin: 5px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/github.ico' %}">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

【讨论】：

【解决方案8】：

.external-links {
  display: inline-block;
  background: #ccc;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
}
.external-links > *{
    vertical-align: middle;
    text-align: center;
    height: 100%;
}

【讨论】：

vertical-align Inherited 是 no，所以你应该设置 child。如果你没有设置 child align type ，图像 html 没有基线，所以图像的底部是新的基线，在 image 之后，文本将按图像的底部对齐，如果你设置了 child align type ，它们将起作用。我想。

【解决方案9】：

使用 display: inline-flex;使用 HTML 代码制作图像中心

.external-links {
  display: inline-flex;
}

【讨论】：