One Pull Left, One Pull Right, but how do I center between?

Question

I want to center that gallery logo. I have tried this link but cannot get the centering to work correctly - Centering brand logo in Bootstrap 3 Navbar

My css is very outdated :(

Maybe try flexbox: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Feb 09 '16 at 04:08

score 3 · Accepted Answer · answered Feb 09 '16 at 08:06

3

You can also center like this - add to your .pull-right what this will do will center that entire div inside its parent div. So in your case you also have the pinterest and facebook social media links inside it. they will be included in the centering.

CSS

position:absolute;
left:50%;
transform:translateX(-50%);

answered Feb 09 '16 at 08:06

Steve Hartley

715
5
10

Thank you as long as I give it it's own div this works as inteded, I only wanted to center the gallery logo not the facebook/pininterest icons – whreed Feb 10 '16 at 20:08
No problem mate :) happy to help, yep it has to be in its own div to keep your media links to the right – Steve Hartley Feb 11 '16 at 02:42

score 0 · Answer 2 · answered Feb 09 '16 at 04:46

For the start if it is okay to customize your Bootstrap, you can remove the Pull Right Class from it. And give it a custom class (something like center-logo)

.center-logo{
  margin: 0 auto important;
  width: 230px;
}

Usually the margin: 0 auto; works when the width is known. That means 230px is a variable which is the width of the content within the div encapsulating the logo and your social media icons (facebook and pinterest). However as you noticed this centers your social icons too. Maybe you move them to another div and apply the pull right class to that div

I wanted to keep my pull right for the social icons. – whreed Feb 10 '16 at 20:08 — whreed, Feb 10 '16 at 20:08

One Pull Left, One Pull Right, but how do I center between?

2 Answers2

CSS