Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • 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
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • 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: 67451
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: 67451
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: 67451
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: 67451
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.
 
Yeast devil! Back to the oven that baked you! And take this tiny ad too:
the value of filler advertising in 2020
https://coderanch.com/t/730886/filler-advertising
    Bookmark Topic Watch Topic
  • New Topic