android - Align div to page center with dynamic size -

-

i saw many example of how centerize div middle of page, in examples size of divs fixed.
how put div in center of page unknown size of div height?
(the gray div in middle)

my code:

<!doctype html> <html>     <head>         <meta http-equiv="content-type" content="text/html; charset=utf-8">         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">         <style>             html,body{                 margin: 0;                 padding: 0;                 border: 0;             }             body{                 background-color: transparent;                  overflow: hidden;                 font-family: "helvetica"                     ;                     color: #359115;                     font-weight:bold;                     }                      #wrapper {                         position: absolute;                         width: 100%;                         height: 100%;                         text-align: center;                     }                      #container {                         background-color: #dddddd;                         /*height: 100%;                         widows: 100%;*/                         margin: 0,auto;                         text-align: center;                     }            </style>     </head>     <body>         <div id="wrapper">             <div id="container" align="center">                 <span class="currency">$ </span><span class="integer">4,080,048.</span><span class="decimal">00</span>             </div>         </div>     </body> </html>

edit:

i need work webview in android , ios, reason numbers appear @ top of browser.
note: browser not full screen!

the screenshot in other question

how put div in center of page unknown size of div height?

a simple solution involving 2d transforms (with negative translate values x , y axis):

http://jsbin.com/itifad/1/edit

css 

div {   position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   -moz-transform: translate(-50%, -50%);    /* older gecko browser */   -ms-transform: translate(-50%, -50%);     /* ie9+ */   -o-transform: translate(-50%, -50%);   transform: translate(-50%, -50%); }

and all: no need use javascript or nested elements, define height of parent containers or use tricky display properties.

further reference: http://css-tricks.com/centering-percentage-widthheight-elements/

browser support: http://caniuse.com/transforms2d (not working on ie<=8)


Comments

Post a Comment

Popular posts from this blog

c++ - Creating new partition disk winapi -

-
i'am trying create new partition , mount volume new, thought createfile let me this, code : lpctstr lpfilename=l"\\\\.\\device\\harddisk0\\partition3"; handle handl=createfile( lpfilename, generic_read | generic_write, file_share_read | file_share_write, null, create_always, file_attribute_normal, null ); if (handl==invalid_handle_value) { qdebug()<<"handl invalid"<<" error"<<getlasterror();} bool success = definedosdevice(ddd_raw_target_path,l"i:",l"\\device\\harddisk0\\partition3"); if(!success) qdebug()<<" definedosdevice failed "<<getlasterror(); bflag = getvolumenameforvolumemountpoint( l"i:\\", // input volume mount point or directory /** u in dir
Read more

Android Prevent Bluetooth Pairing Dialog -

-
i'm developing internal application uses bluetooth printing. want bluetooth pairing occur without user input. have managed working trapping android.bluetooth.device.action.pairing_request broadcast. in broadcast receiver call setpin method, , pairing works ok, bluetoothpairingdialog displayed second or two, disappears - see link below. https://github.com/android/platform_packages_apps_settings/blob/master/src/com/android/settings/bluetooth/bluetoothpairingdialog.java since broadcast non-ordered, can't call abortbroadcast() , , wondering if there other way prevent pairing dialog appearing. can hook window manager in way? i haven't been able come way without modifying sdk. if you're oem, it's easy (i'm on 4.3): in packages/apps/settings/androidmanifest.xml, comment intent filter pairing dialog: <activity android:name=".bluetooth.bluetoothpairingdialog" android:label="@string/bluetooth_pairing_request"
Read more

VBA function to include CDATA -

-
i have following function include cdata: function cdatasection() dim objdom domdocument dim objkmlrootelement ikmldomelement dim objkmlelement ikmldomelement dim cdata ikmldomcdatasection set objdom = new domdocument set objkmlrootelement = objdom.createelement("balloonstyle") objdom.appendchild objkmlrootelement set objkmlelement = objdom.createelement("text") objkmlrootelement.appendchild objkmlelement set cdata = objdom.createcdatasection("text") cdata.data = "<![cdata[<b>latitude = $[latitude]</b>?]]>;" end function when run above, getting error "user defined data type not found" function. yes ripster says find library reference. vba window tools>references for list of relevant references see... http://msdn.microsoft.com/en-us/library/windows/desktop/ms763701%28v=vs.85%29.aspx however, if have hard time tracking down reference, replace dim sta
Read more