Html 为什么文字位置与视口对齐

我试图将y文本与项目对齐，但每当我这样做时，文本都会与视口对齐。每当我尝试对齐文本时，文本都会随视口垂直移动

标题{
高度：900px；
背景图像：url（'../img/large banner image.png'）；
背景重复：无重复；
背景位置：中上；
}
跨度{
字体：60px Pacifico，无衬线；
字体大小：400；
}
.标题类型{
垂直对齐：-16px
}
img{
显示：内联块；
利润率：17像素；
}
h1{
文本对齐：居中；
位置：相对位置；
顶部：62px；
右：13px；
}
氢{
字体：22px Raleway，无衬线；
字号：700；
}
p{
字体：36px Raleway，无衬线；
字体大小：300；
文本对齐：居中；
位置：相对位置；
顶部：90px；
}
.电话{
文本对齐：居中；
位置：相对位置；
顶部：-567px；
}
.向下箭头{
文本对齐：居中；
位置：相对位置；
顶部：-574px；
}
.content-alt2{
显示：无
}
.内容{
显示：无
}
.内容2{
显示：无
}
.候补{
显示：无
}
.其他{
文本对齐：居中；
}
.接近底部{
文本对齐：居中；
}
页脚{
字间距：30px；
}
.页脚{
字体：16px直升机，无衬线；
字体大小：400；
}
.形象{
文本对齐：居中；
}

集中
带有焦点的应用程序登录页

大特写
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图

告别精英。莫里斯·因特杜姆·维利特·维塔酒店

努拉·莫尔斯蒂欧盟。
大特写
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图

告别精英。莫里斯·因特杜姆·维利特·维塔酒店

努拉·莫尔斯蒂欧盟。
另一大特色
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图

告别精英。莫里斯·因特杜姆·维利特·维塔酒店

努拉·莫尔斯蒂欧盟。
另一大特色
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图

告别精英。莫里斯·因特杜姆·维利特·维塔酒店

努拉·莫尔斯蒂欧盟。
立即获取应用程序！
Lorem ipsum dolor sit amet，是一位杰出的献身者。弗林蒂利亚-弗林蒂利亚nisl康格啤酒。Maecenas nec libero调味品，位于mauris elementum。Phasellus eget nisi dapibus，ultricies nisl at，hendrerit Risususis Orna luctus id
索利西图丁·安特·洛博蒂斯。
“Focus是一款非常有用的应用程序。我会把它推荐给任何人。”
凯尔·特纳，博主
打个招呼，然后联系
Lorem ipsum dolor sit amet，奉献给精英suspendisse。
联系下载新闻邮件支持

这是因为将段落元素设置为

位置：relative

。在本例中，相对于视口。把它扔掉。除非绝对需要y，否则不应使用相对定位。

这是因为您将段落元素设置为

位置：相对
。在本例中，相对于视口。把它扔掉。除非绝对需要y，否则不应使用相对定位。
如果试图将文本设置为“垂直对齐：中间”，则应为其提供显示属性：“显示：表格单元格”及其父元素显示属性：“显示：内联表格”。这样，垂直对齐属性就可以正常工作。
如果试图将文本设置为“垂直对齐：中间”，则应为其指定显示属性：“显示：表格单元格”及其父元素显示属性：“显示：内联表格”。这样，您的垂直对齐属性就可以正常工作。
下面是一个在页面上使用浮动元素进行响应的工作示例，希望对您有所帮助

header{
   height:250px;
   background-image:url('../img/large-banner-image.png');
   background-repeat: no-repeat;
   background-position: center top;
}


span {
   font: 60px Pacifico, sans-serif;
   font-weight: 400;
}

.Header-Type{
   vertical-align: -16px
}

img {
  display: inline-block;
  margin: 17px;
}

h1 {
   text-align: center;
   margin-top:60px;
}

h2 {
   font: 22px Raleway, sans-serif;
   font-weight: 700;
}

p {
   font: 36px Raleway, sans-serif;
   font-weight: 300;
   text-align: center;
}

.content-alt  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
}

.content-alt2  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
   margin-top:60px;
}

.content-alt2::before{
  clear:both;
}

.content  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
}

.content2  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
   margin-top:60px;
}

下面是一个在页面上使用浮动元素进行响应的工作示例，希望对您有所帮助

header{
   height:250px;
   background-image:url('../img/large-banner-image.png');
   background-repeat: no-repeat;
   background-position: center top;
}


span {
   font: 60px Pacifico, sans-serif;
   font-weight: 400;
}

.Header-Type{
   vertical-align: -16px
}

img {
  display: inline-block;
  margin: 17px;
}

h1 {
   text-align: center;
   margin-top:60px;
}

h2 {
   font: 22px Raleway, sans-serif;
   font-weight: 700;
}

p {
   font: 36px Raleway, sans-serif;
   font-weight: 300;
   text-align: center;
}

.content-alt  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
}

.content-alt2  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
   margin-top:60px;
}

.content-alt2::before{
  clear:both;
}

.content  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
}

.content2  {
   text-align:left;
   float:left;
   width:20%;
   margin-left:20%;
   margin-top:60px;
}

你能更好地描述一下你想要实现的目标吗？你的问题不太清楚。这段代码看起来不完整，你能发布完整的源代码吗？你是否尝试垂直对齐？不确定你想要实现什么。我尝试使文本与页面对齐，而不是通过垂直缩放移动。你能更好地描述一下你想要实现的目标吗？你的问题不太清楚。这段代码看起来不完整，你能发布完整的源代码吗？你尝试垂直对齐吗？不确定你想要实现什么。我尝试使文本与页面对齐，而不是通过垂直缩放我用来发送元素以与网格对齐的段落来移动。文本可能会很痛苦。然后你必须寻找解决办法。当相对定位时，文本对对齐是不敏感的。另外一条建议，学习一些好的全新技术：css网格。它将使您的前端开发更容易！！问题仍然存在于样式中，我将内容和内容放置在我用来发送元素以与网格对齐的横档上。文本可能会很痛苦。然后你必须寻找解决办法。当相对定位时，文本对对齐是不敏感的。另外一条建议，学习一些好的全新技术：css网格。它将使您的前端开发更容易！！问题仍然存在于样式上，我把内容和内容高度放在垂直对齐的位置上，这很糟糕。这是这些伟大的功能和另一个伟大的创举，你能帮我进一步吗。这篇课文让我不知所措。试着再向我解释一次这个问题。速度很慢，我很想帮助你，但我不太确定到底是什么问题。我正试图让这些伟大的特征的文本随视口一起移动。如您所见，如果将视口向左或向右移动，它不会随页面的其余部分一起移动。这是个问题。它应该在移动。哦，好吧，现在我明白问题了，你不能用“位置：相对”来解决这个问题。这就是为什么相对定位不能用于创建cont的原因