CODEWITHSUNDEEP
htmlcsscentering
Verdemis
Verdemis

Reputation: 287

CSS: center content on resize

I have a content area which is centered by margin:0 auto and has a width of 1280px. when i resize my browser window only the content on the right side gets cut off if the browsers width gets below 1280px. is there a way to keep the whole site always centered so the content area gets cut of left an right equally?

Upvotes: 1

Views: 3231

Answers (4)

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

I can't find it very usefull for a web page but yes.. with a very little jquery you can make your container be in the middle when larger that the window width.

It is not that "right side gets cut off ", it's that at larger content that window width the scroll starts, and the scroll bar by default will always be at the left (or top if vertical).

so just use this to center the scroll:

$(function () {
    scrollTo(($(document).width() - $(window).width()) / 2, 0);
});

here you have a fiddle

Edited: Won't work with manual resize... try resizing and then reload the page

Upvotes: 0

Piotr Dajlido
Piotr Dajlido

Reputation: 2030

If you really need to keep the content width fixed at 1280px you can use some jQuery to correct the position via margin property on window.resize event:

$(this).resize(function(){
    var width =  $('#itemToKeepCentered').width();
    var windowWidth = $(this).width()
   $('#itemToKeepCentered').css('margin-left', (windowWidth-width)*0.5);
});

Working example: https://jsfiddle.net/urahara/oq4uj9q7/2/

Note: @media css may be useful to you as well.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you could try with a mediaquery in which you can center your fixed-width div , e.g.

http://codepen.io/anon/pen/RNqXGW

div {
  background: #d8d8d8;
  text-align: center;
  width: 1280px;
  margin: 0 auto;
}

@media all and (max-width: 1280px) {
   main { 
       /* hide horizontal scrollbar */
       overflow: hidden; 
   }
   div {
       /* these properties cut your div equally both
          on left and right side */
       margin-left: 50%;
       -webkit-transform: translateX(-640px);
       -moz-transform: translateX(-640px);
       transform: translateX(-640px);
   }  
}

Upvotes: 1

benjaminz
benjaminz

Reputation: 3228

You may want to consider using media queries like @media for responsive design.

And if the content is an image, consider making it the background, and set {background-position: center}

Upvotes: 0

Related Questions