文本在中间不对齐

Question

我想重新创造出这样的东西：

​

​

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

​

​

正如您所看到的，这里有两个问题：

1. 这张照片不符合div的要求。
2. 课文不在中间。

我想，如果我能使文字与中心对齐，图片也会自动符合，但我似乎无法做到。

下面是我写的代码：

​

.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;的两行代码会对文本进行居中，但事实并非如此。

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

​

除了上面的内容之外，我还对代码片段做了一些小的修改(比如将显示更改为inline-block，并更改了一些边距)，以使结果看起来更好一些。

​

​

Answer 2

​

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

​

您可以尝试这样做，我添加了新的css到..external和..external跨度，以满足您的要求

Answer 3

在css中添加以下内容：

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