• 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 all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Centering div in a content inside a div

 
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
  • 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.
 
Marshal
Posts: 67420
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • 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
  • 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
  • Quote
  • Report post to moderator
I tried following your advises but it doesn't seems to work:

HTML:


CSS:
 
Bear Bibeault
Marshal
Posts: 67420
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • 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
  • 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
Marshal
Posts: 67420
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • 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
  • 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
Marshal
Posts: 67420
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • 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
  • 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.
 
They gave me pumpkin ice cream. It was not pumpkin pie ice cream. Wiping my tongue on this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic