html - Vertically centering two <div class="span6">'s within Bootstrap -


edit: wanted clarify these spans have unknown height (because of responsiveness)!

i'm trying vertically align 2 <div class="span6">'s within <div class="row"> in bootstrap , i'm having problems using of usual tricks, such display: inline-block; or display: table-cell; (here's jsfiddle working on: http://jsfiddle.net/ma6za/).

here's trying use, not work in bootstrap:

<div class="container">     <div class="row" style="display: table">         <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">             block 1 - vertically center me please!         </div>         <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">             block 2- center me         </div>     </div> </div>

is possible vertically align these 2 .span6's such both height of block1 , block2 unknown? i'd use bootstrap because of responsible features, tablet+ we'd content vertically align.

i don't think you're making clear if want content of div's vertically centered or the actual div's themselves. anyway, there's solution both options:

vertically centering actual div's

first solution vertically aligns div's: jsfiddle

it works setting display: table; on .container , display: table-cell; on .row. once done can set vertical-align: middle; on .row vertically center content.

i have had manually force width of .row 960px, not responsive (you fix using media queries), margin-left of -20px bootstrap sets on .row doesn't work after setting display: table-cell; on .row. not forcibly adding these 20px result in second div ending below first because won't both fit on same line anymore. have set height: 100%;'s on elements demonstration purposes.

css

.container {     margin-top: 10px;     display: table;     height: 100%; } .row {     min-width: 960px;     display: table-cell;     height: 100%;     vertical-align:middle; }

vertically centering div's contents

if wanted vertically center content of div's, can setting display: table; on .row , setting display: table-cell; on .span6. you'd need rid of float: left; on .span6 setting float: none.

here's fiddle demonstrating option: jsfiddle


Comments

Post a Comment

Popular posts from this blog

user interface - Python attempting to create a simple gui, getting "AttributeError: 'MainMenu' object has no attribute 'intro_screen'" -

complete newbie here python started learning language few days ago (with no programming experience beforehand). i'm bashing skull against desk here, trying create 1 menu button lead menu, supposed replace/hide/destroy previous menu (either works, long process can reversed). what i've come far: import wx class mainframe(wx.frame): def __init__(self): wx.frame.__init__(self, none) self.centre() self.main_menu = mainmenu(self) self.intro_screen = introscreen(self) self.intro_screen.hide() class mainmenu(wx.frame): def __init__(self, parent): wx.frame.__init__(self, parent=parent) self.main_menu = mainmenu panel = wx.panel(self) sizer = wx.boxsizer(wx.vertical) nextscreen = wx.button(panel, label='next screen', size=(150,30)) nextscreen.bind(wx.evt_button, self.nextscreen) sizer.add(nextscreen, 0, wx.center|wx.all, 5) self.show() self.c...
Read more

jquery - Common JavaScript snippet to share files on Google Drive, Dropbox, Box.net or SkyDrive -

this first assignment of file sharing. need share files our website above mentioned locations. currently, have been exploring each service’s api file sharing. question 1 : there javascript code snippet available (like addthis.com ) share files? question 2 : should use server side coding file sharing or javascript advisable? thanks viewers. found useful plug-in named "ink file picker". saves given http file resource directly users online storage engine. url: https://developers.inkfilepicker.com/docs/web/ live example: http://ctrlq.org/save/
Read more

Android Gson.fromJson error -

i've completed tutorial how connect json url , parse content using gson library. code works fine url specified in tutorial, tryed modify work this url . tryed display 1 field second ulr, base field, can't work. here code, please help: public class jsonparsingactivity extends activity { string url = "http://api.openweathermap.org/data/2.5/weather?q=london,uk"; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); inputstream source = retrievestream(url); gson gson = new gson();// main gson class reader reader = new inputstreamreader(source); searchresponse response = gson.fromjson(reader, searchresponse.class); //gson.fromjson(string, class) toast.maketext(this, response.base, toast.length_short).show(); } private inputstream retrievestream(string url) { defaulthttpclient client = new defaulthttpclient(); httpget getrequest = new httpget(url);...
Read more