Centering an element inside of a DIV using HTML/CSS -

-

i working on periodic table, , although got mass , number placed want them to, element symbol won't budge. tried everything: converting <p> <span> <div>, using display: block , setting margin: 0 auto, using text-align: center, still won't budge.

here's html:

        <div id = "a1" class="element alkalimetal">             <p>                 <span id = "anumber">118</span>                 <span id = "amass">9.008</span>             </p>             <br>             <div id = "symbol">h</div>         </div>         <div id = "a2" class = "element noblegas">          </div>

here's css:

#anumber{     font-family:arvo;     top: 0.1em;     position:relative;     vertical-align:super;     font-size:1.5em;     float:left;     padding-left:0.2em; }  #symbol{     width: 5em;     font-family: avenircondensed;     font-size: 5em;     text-align:center;     margin: 0 auto; }  #amass{     font-family:avenirnext;     top: 0.1em;     position:relative;     vertical-align:super;     font-size:1.5em;     float:right;     padding-right:0.2em } .element{     border: 1px solid black;     border-radius: 3px;     height: 8em;     width: 8em;     float: left; }

p.s.: table designed mobile want avoid using position:absolute or fixed margin widths.

change #symbol rule following:

#symbol{     /* width: 5em; remove */     font-family: avenircondensed;     font-size: 5em;     text-align:center;     /* margin: 0 auto; remove */ }

your width causing symbol spill on div sitting in, breaking flow. margin: 0 auto no longer needed after that.

also, side note, should using more classes instead of id's. id's intended elements used once per page. can set #symbol class .symbol .amass , anumber. allow set css rules once , use them each element in table.


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

php - joomla get content in onBeforeCompileHead function -

-
i'm developing joomla system plugin. need add javascript , css files if [myshortcode] shortcode found in content. how can content in onbeforecompilehead function function onbeforecompilehead() { $document = jfactory::getdocument(); //add scripts if shortcode found ... $document->addstylesheet($cssfile, 'text/css', null, array()); the $content = jresponse::getbody(); not work. thanks try this, for style sheet, $document = jfactory::getdocument(); $document->addstylesheet('http://domain.com/templates/css/style.css'); for javascript file $document = jfactory::getdocument(); $document->addscript('full url'); also can this, $document = jfactory::getdocument(); // add javascript $document->addscriptdeclaration(' window.event("domready", function() { alert("an inline javascript declaration"); }); '); // add styles $style = 'body {'
Read more