html - Positioning a div between two buttons -
i'm trying have remote control buttons, , div playing info between 2 of them.
but doesn't work.


as can see, on actual ipad, renders differently, , don't know how fix it.
html:
<div id="buttons"> <button id="prev" class="control" onmousedown="skip('prev')"></button>     <div id="info"> gfegrbhthehrerhg</div> <button id="next" class="control" onmousedown="skip('next')"></button><br />   <button id="rwd" class="control" onmousedown="changespeed(-2)"></button> <button id="stop" class="control" onmousedown="emitcommand('stop')"></button> <button id="play" class="control" onmousedown="emitcommand('play: loop: true speed: 100')"></button> <button id="ffwd" class="control" onmousedown="changespeed(2)"></button>     css:
button.control {     display: inline-block;     width:150px;     height:150px;     background-size: 150px 150px;     border:0;     margin: 0.5%; }  div#info {     width:300px;     height: 150px;     margin: 0 1.1%;     position: relative;     top: -58px;     margin-bottom: -50px;     border:1px solid red;     display: inline-block; }  button#prev {     margin-left: 160px; }  button#rwd {     margin-left: 160px; }   #buttons {     margin: 0 auto;     border: 1px solid lightgray; }   what doing wrong? correct way accomplish this? thanks
add
vertical-align: top; div#info
and remove top: -58px; div#info too
here's link working example: example link
Comments
Post a Comment