Question

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

然后我将其用于社交媒体和外部网站：）这是我可以想到的：

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

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

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

这是我写的代码：

.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

要垂直对齐文本，您需要将q.string = str2;放在q.string = (void*)str2;标签上。

关于图像不适合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; }并更改了一些边距），以使结果看起来更好。

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>

您可以尝试一下，我在.external-links和.external-links范围内添加了新的CSS以满足您的要求

Answer 3

在CSS中添加以下内容：

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

Answer 4

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

删除.external-links类中的display：table-cell和vertical-align：middle并添加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>

Answer 5

只需将.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>

Answer 6

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

Answer 7

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

Answer 8

使用显示：inline-flex;用HTML代码使图像居中

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

Answer 9

您正在寻找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;
}

您还可以使用显示属性的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;
}

文字在中间未对齐

9 个答案: