即使窗口大小更改，如何使文本垂直对齐

Question

即使窗口大小发生变化，如何使文本像这样对齐？

基本上所有下面的红色文本必须与红色文本完全对齐

Answer 1

如果您有能力使用网格，那么sub-grid正是为此用例设计的。如果没有，我建议使用表格。数据看起来很“表格化”，很好地使用了表格。

要快速了解Subgrid，请参考以下文章：https://dev.to/kenbellows/why-we-need-css-subgrid-53mh

Answer 2

您可以对父元素执行此操作

.parent{
      position: relative;    
}

这是子元素

.child{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); 
}

Answer 3

尝试此代码。

'display：flex;' “ align-items：居中；” 'justify-content：center;'

Answer 4

只需在HTML代码的开头部分添加以下行： <meta name="viewport" content="width=device-width, initial-scale=1">

，该代码位于CSS代码的底部： 大括号之间的数字等于CSS生效的最大屏幕尺寸

@media screen and (max-width: 600px){ //any CSS here is to make it snap into place based on how the window size affects it } 

//如果需要其他窗口大小

@media screen and (max-width: 200px) { //make another one }