css - Why does the Image move with the browser but doesnt stay centered? - 


#border-search {     position: relative;     top: 50% !important;     left: 25% !important;     width: 100% !important;      margin-left: auto !important;      margin-right: auto !important;     display: none;     }        #border-search.center img {     position: absolute; top: 50%; left: 50%;     transform: translate(-50%, -50%);      width: 30%;      height: auto;     }

how stay centered. ive tried many different things, dont work. display none needs stay since need show hide image. else need add thi work? want stay centered horizontally only

here js fiddle

http://jsfiddle.net/matsuiny2004/zffvcvkk/

you can try center current #border-search inner img element following change in css, relatively positioning image automatic (and equal) left- , right-margins, , making centered.

#border-search {     margin: 0 auto;     position: relative; }  #border-search img {     display: block;     margin: 0 auto;     position: relative; }

the display: block; statement needed image considered block element can affected margin attributes.

check demo js fiddle validate said. :)


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more