• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Centering div in a content inside a div

 
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,

i'm using bootstrap and i'm trying to center a widget from facebook in the center of my "contact" page.

This is the main body of the website:



I can't manage to center the code inside the "content" div using css, any suggestions?


This is how the page looks at the moment, i just want the fb-page window to stay on the middle.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't know if bootstrap has something specific for this, but in general you'd give the element a specific width, and a left and right margin of auto to center it.
 
Ranch Hand
Posts: 310
18
MS IE Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Bootstrap has a class for this purpose: center-block.

It works the same way as Bear said, it sets left and right margin to auto. You will need to apply a static width to your div, in addition to adding the center-block class.
 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I tried following your advises but it doesn't seems to work:

HTML:


CSS:
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You don't seem to have applied any of the suggestions made thus far.
 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:You don't seem to have applied any of the suggestions made thus far.



As i said, i tried. If you want to you can tell me where i failed.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You didn't apply either of the suggestions already given. If you're using bootstrap, I'd re-read Adam's post.
 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Nevermind, i couldn't find an answer. My fix was creating two columns, not a single one and in this way the centering works: it's the only fix i managed to find.

Ehrm, thank you anyways.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why didn't you just use the bootstrap class that Adam suggested?
 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Why didn't you just use the bootstrap class that Adam suggested?


As i already told you, i have no idea how to do it. I even asked you to correct my mess but you just ignored me, not that i care now: i found another solution which works flawlessy. Thank you anyways.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic