本问题已经有最佳答案，请猛点这里访问。

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

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

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

图片不适合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;

}

github

twitter

stackoverflow

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

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

}

github

twitter

stackoverflow

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

要垂直对齐需要将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;

}

github

twitter

stackoverflow

除了上述内容之外，我在片段中进行了一些小的更改(比如将显示更改为inline-block并更改了一些边距)以使结果看起来更好一些。

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

.external-links {

display: inline-flex;

}

.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。 如果你没有设置子对齐类型，图像html没有基线，所以图像的底部是新的基线，在图像之后，文本将按图像的底部对齐，如果你设置了子对齐类型，它们将起作用。 我认为。

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

}

github

twitter

stackoverflow

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

}

github

twitter

stackoverflow

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

}

github

twitter

stackoverflow

删除display：table-cell和vertical-align：middle并添加display：inline-flex和align-items：center in .external-links类。另外，我添加了填充：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

}

github

twitter

stackoverflow

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

.external-links img {

vertical-align: middle;

}

.external-links span {

vertical-align: middle;

}

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

}