html - trying to make icons fixed with css -
h4 { color:#ffffff; font-size:20px; letter-spacing:2px; display:inline-block; padding:0 10px; } { color:#ffffff; font-size:20px; }
<div class="col-md-12"> <i class="fa fa-angle-left" id="prev" aria-hidden="true"></i> <h4 class="quotes" style="display:inline-block;"> web devloper </h4> <h4 class="quotes" style="display:inline-block;"> web designer </h4> <h4 class="quotes" style="display:inline-block;"> freelancer </h4> <i class="fa fa-angle-right" id="next" aria-hidden="true"></i> </div>
how make next , previous icons stay fixed? here's problem:
add icons position: absolute;
, parent element position: relative;
. example:
#block { padding: 20px 70px; background: green; width: 300px; position: relative; } #prev, #next { position: absolute; color: white; top: 50%; margin-top: -5px; width: 10px; height: 10px; background: white; } #prev {left: 20px;} #next {right: 20px;}
<div id="block"> <div id="next"></div> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div id="prev"></div> </div>
Comments
Post a Comment