无论屏幕大小如何，我如何将文本与内容对齐，并将文本保持在原来的位置

Question

我想要文本"社交"；保持原样，与黑条垂直对齐。但正如你所看到的，当我把它放进bootstrap/html时，它没有对齐，但至少它和黑条保持一致。在普通设备和手机上

代码。

当我通过添加css来修复这个问题时，它与黑条完全对齐，但当屏幕变小(移动(时，它不会停留在原来的位置。

在正常屏幕上

在移动屏幕上

html代码

css代码

我希望它能完美对齐，即使屏幕大小发生变化也能保持对齐。

Answer 1

您应该检测css中的屏幕宽度。代码可能是这样的：

@media (min-width: 576px) {
#socials {
max-width: 540px;
}
}
@media (min-width: 768px) {
#socials {
max-width: 720px;
}
}
@media (min-width: 992px) {
#socials {
max-width: 960px;
}
}
@media (min-width: 1200px) {
#socials {
max-width: 1140px;
}
}

Answer 2

尝试使用固定的位置而不是绝对的

#socials
{
position:fixed;
}