Question

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

header {
    height: 900px;
    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;
    position: relative;
    top: 62px;
    right: 13px;
}

h2 {
    font: 22px Raleway, sans-serif;
    font-weight: 700;
}

p {
    font: 36px Raleway, sans-serif;
    font-weight: 300;
    text-align: center;
    position: relative;
    top: 90px;
}

.Phone {
    text-align: center;
    position: relative;
    top: -567px;
}

.Down-Arrow {
    text-align: center;
    position: relative;
    top: -574px;
}

<.content-alt {
    float: left;
    margin: -600px 1800px
}

> .content-alt2 {
    display: none
}

.content {
    display: none
}

.content2 {
    display: none
}

.alternate {
    display: none
}

.other {
    text-align: center;
}

.near-bottom {
    text-align: center;
}

footer {
    word-spacing: 30px;
}

.footer {
    font: 16px HelveticaNeue, sans-serif;
    font-weight: 400;
}

.Image {
    text-align: center;
}

<header>
    <h1> <img style="vertical-align:middle" src="img/focus.png"/><span>Focus</span></h1>
    <p>A landing page for your app with focus</p>
</header>

<div class="Phone">
    <img src="img/iphone.png" />
</div>

<div class="content-alt">
    <h2>Great Feature</h2>
    <div>Lorem ipsum dolor sit amet, consectetur
        <br> adipiscing elit. Mauris interdum velit vitae
        <br> nulla molestie eu. </div>
</div>

<div class="content">
    <h2>Great Feature</h2>
    <div>Lorem ipsum dolor sit amet, consectetur
        <br> adipiscing elit. Mauris interdum velit vitae
        <br> nulla molestie eu. </div>
</div>

<div class="content-alt">
    <h2>Another Great Feature</h2>
    <div>Lorem ipsum dolor sit amet, consectetur
        <br> adipiscing elit. Mauris interdum velit vitae
        <br> nulla molestie eu. </div>
</div>

<div class="content">
    <h2>Another Great Feature</h2>
    <div>Lorem ipsum dolor sit amet, consectetur
        <br> adipiscing elit. Mauris interdum velit vitae
        <br> nulla molestie eu. </div>
</div>

<div class="alternate">
    <h2>Get The App Today!</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
        sollicitudin ante lobortis at.</div>
</div>

<div class="other">
    <h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
    <div>Kyle Turner, Blogger</div>
</div>

<div class="Image">
    <img src="img/people.png" />
</div>

<div class="near-bottom">
    <h4>Say Hi & Get in Touch</h4>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>

<footer>
    <p>Contact Download Press Email Support</p>
</footer>

任何疑难解答都将受到赞赏。

Answer 1

那是因为你将段落元素设置为position: relative。在这种情况下，相对于视口。摆脱它。除非绝对必要，否则你不应该使用相对定位。

Answer 2

如果您尝试将文字设置为＆＃34; vertical-align：middle＆＃34;你应该给它显示属性：＆＃34; display：table-cell＆＃34;及其父元素display属性：＆＃34; display：inline-table＆＃34;。这样你的垂直对齐属性就可以正常工作了。

Answer 3

这是一个带有浮动元素的工作示例，用于页面上的响应，希望有所帮助！

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

为什么我的文本位置与视口对齐

3 个答案: