テキストを中心にしてスクロールしよう

私は以下を持っていますjsfiddle（私はちょっとサンプリングしました）。テキストを中心にしてスクロールしよう

<body> 
    <div class="title"> 
    <div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce 
     placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi. 
     Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur. 
     Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate 
     nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit. 
     Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna. 
     Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus 
     facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis 
     nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet 
     condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor 
     diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan 
     commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div> 
    </div> 
</body>

私は、テキストを中央にしようと、それがオーバーフローしたときにテキストをスクロールしようとしています。私は何が間違っているのか正確にはわからない。私は、絶対的な位置から相対的な位置に相対的な位置に変更しようとしましたが、何も機能しませ私は間違って何をしています。

出典

2017-06-15 Deoi Loin

htmlから 'overflow：hidden'を削除するだけですか？それはスクロールし、中心に置かれています... https://jsfiddle.net/q6cn3sfb/2/ –

を.titleからposition: absolute;を削除し、HTMLからoverflow: hidden;を削除。あなたのテキストはすでに中央揃えされています。もちろん

更新CSSの一部

html { 
    position: relative; 
    background: #FF4E50; 
    background: -webkit-linear-gradient(right, #FF4E50, #F9D423); 
    background: linear-gradient(to left, #FF4E50, #F9D423); 
    -webkit-transition: all .5s ease; 
    transition: all .5s ease; 
    overflow: auto; /*Add this or remove it */ 
    font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 
.title { 
    /*position: absolute;*/ 
    /*top: 40%;*/ 
    /*left: 0;*/ 
    /*right: 0;*/ 
    /*-webkit-transform: translateY(-50%);*/ 
    /*transform: translateY(-50%);*/ 
    text-align: center; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 80px; 
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); 
    z-index: 1000; 
}

@import url(https://fonts.googleapis.com/css?family=Montserrat); 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
} 
 

 
html { 
 
    position: relative; 
 
    background: #FF4E50; 
 
    background: -webkit-linear-gradient(right, #FF4E50, #F9D423); 
 
    background: linear-gradient(to left, #FF4E50, #F9D423); 
 
    -webkit-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    overflow: auto; 
 
    font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
} 
 

 
.title { 
 
    /*position: absolute;*/ 
 
    /*top: 40%;*/ 
 
    /*left: 0;*/ 
 
    /*right: 0;*/ 
 
    /*-webkit-transform: translateY(-50%);*/ 
 
    /*transform: translateY(-50%);*/ 
 
    text-align: center; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 80px; 
 
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); 
 
    z-index: 1000; 
 
} 
 

 
.title a { 
 
    color: #fff; 
 
    text-transform: none; 
 
    text-decoration: none; 
 
    font-size: 50px; 
 
    letter-spacing: 0; 
 
}

<body> 
 
    <div class="title"> 
 
    <div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce 
 
     placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi. 
 
     Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur. 
 
     Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate 
 
     nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit. 
 
     Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna. 
 
     Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus 
 
     facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis 
 
     nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet 
 
     condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor 
 
     diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan 
 
     commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div> 
 
    </div> 
 
</body>

出典

2017-06-15 04:06:26 LKG

のでoverflow:autoそれを変更あなたは、HTML overflow:hiddenで使用している

@import url(https://fonts.googleapis.com/css?family=Montserrat); 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
} 
 

 
html { 
 
    position: relative; 
 
    background: #FF4E50; 
 
    background: -webkit-linear-gradient(right, #FF4E50, #F9D423); 
 
    background: linear-gradient(to left, #FF4E50, #F9D423); 
 
    -webkit-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
} 
 

 
.title { 
 
    text-align: center; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 80px; 
 
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); 
 
    z-index: 1000; 
 
} 
 

 
.title a { 
 
    color: #fff; 
 
    text-transform: none; 
 
    text-decoration: none; 
 
    font-size: 50px; 
 
    letter-spacing: 0; 
 
}

<body> 
 
    <div class="title"> 
 
    <div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce 
 
     placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi. 
 
     Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur. 
 
     Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate 
 
     nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit. 
 
     Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna. 
 
     Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus 
 
     facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis 
 
     nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet 
 
     condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor 
 
     diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan 
 
     commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div> 
 
    </div> 
 
</body>

出典

2017-06-15 04:02:58 athi

とても簡単！

変化

<div id="val">

<div id="val" align="center">

にし、HTML {}あなた

overflow: hidden;

は、CSS体をCSSから移動

body { 
    overflow: hidden; 
}

とあなたの中に新しいオブジェクトを追加するには、CSSで、ヴァル

#val { 
    overflow: y; 
}

は、このコードをお楽しみください。

出典

2017-06-15 04:25:27 genife

テキストを中心にしてスクロールしよう

答えて

関連する問題