1. 首页
  2. 问答
  3. 试图居中和滚动文本

试图居中和滚动文本

2017-06-15 74 views
0

我有以下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

+1

刚刚从html中删除'overflow：hidden'？它滚动并居中... https://jsfiddle.net/q6cn3sfb/2/ –

回答

0

您正在使用HTML overflow:hidden因此改变它overflow:auto从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

0

从.title删除position: absolute;和 

@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

0

当然那么容易！

变化

<div id="val">

到

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

，并摆脱你的CSS HTML {}

overflow: hidden;

你的CSS身体

body { 
    overflow: hidden; 
}

并添加你的CSS一个新的对象，VAL

#val { 
    overflow: y; 
}

享受这个代码。

来源

2017-06-15 04:25:27 genife

相关问题

 相关问题