Jump to content
thugsauce

Centering Content with Vertical Navbar

Recommended Posts

Hello all!

This is my first post in this community. Stack Overflow didn't seem so helpful -- and a lot of people there have snarky attitudes. After using W3 so much for help -- I wondered if they had forums. Here I am.

Problem

1. I am using a navbar on the left side of the screen to give this website a "platform" feel to it. 

2. I've set a margin so my content doesn't get hidden under the bar.   margin-left: 200px

3. The page displays fine on smaller screens and lower resolutions. The left navbar will automatically hide and I've made a media query to remove the margin-left: 200px for the main content

4. I'm using the w3.css "framework"

On larger screens, however, the page's content is pushed left. I wanted it centered. If I used margin: 0 auto; then the content would be pushed back under the navigation -- which isn't what I want.

I wasn't able to attach an image of my problem normally -- so I've included a link here: Page Image

 

Thanks for your time!!

 

Share this post


Link to post
Share on other sites

Thanks for the reply! As soon as I read that, it seemed like a logical solution to me. However, after nesting a div below the main one -- the content didn't center -- and but the images inside the cards shifted slightly. Maybe I'm doing something wrong.

HTML

<div class="w3-row-padding game_card">
     <div class="center_content">

                *** CONTENT ***

     </div>
</div>

CSS

.game_card {
  margin-left: 200px;
  margin-top: 30px;
}

.center_content {
  margin: 0 auto;
}

 

Share this post


Link to post
Share on other sites

We maybe getting confused here, to centre 'center_content' NON-FLOATED block element container, it must have a width, for example width: 80%; without this it fills the whole available to it, and the content will always be the left of that.

To centre content of images which are inline elements, or block elements styled to be inline or inline-block elements which essentially makes them act as text within a block paragraph element, you would style the block container 'center_content' with text-align: center;

Share this post


Link to post
Share on other sites

Thanks! That did the trick!

Unfortunately, it also caused all of the elements wrapped inside to shrink. 

I think I'll have to study up more on CSS and responsive design.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×