how to horizontally center align body wrapper?
Question
I would like to know if there's a better way to do a 1600px wide wrapper body to horizontally center align to all screen sizes.
I'm using these:
if($(window).width() > 1400) { $('body').scrollLeft(80); } if($(window).width() > 1281 && $(window).width() <= 1400){ $('body').scrollLeft(140); } if ($(window).width() < 1280){ $('body').scrollLeft(195); } if ($(window).width() < 1024){ $('body').scrollLeft(300); }
3 answers
solution1
1 2015-01-20 04:05:36
I am not sure why you need Javascript for this. You can just use a centering content div; see the attached code snippet (set at 200px wide, but the result is the same).
.content { width: 200px; margin-left: auto; margin-right: auto; }
<!DOCTYPE html> <html> <head><title>Body Centering</title></head> <body> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere nibh a elit egestas fermentum. Nunc eu velit venenatis, blandit nulla a, gravida justo. Sed accumsan arcu in mi dapibus pretium. In hac habitasse platea dictumst. Nulla fermentum, augue eget aliquam pharetra, turpis diam ornare neque, a interdum ipsum ligula aliquam nunc. Maecenas eu eleifend libero.</p> </div> </body> </html>
solution2
0 2015-01-20 05:11:02
If you are trying to create a responsive site, I would suggest using @media queries to do so. In your css try using something like this:
body {
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 1400px) {
.wrapper {
width: 1600px;
}
}
@media screen and (min-width: 1280px) {
.wrapper {
width: 1280px;
}
}
@media screen and (max-width: 1280px) {
.wrapper {
width: 1280px;
}
}
Of course I would change the width size of the wrapper depending on what size you would like it to be, but this should make your site responsive to screen size. The other option would be to make the style of the wrapper .wrapper { width: 100%; margin-left: auto; margin-right: auto; .wrapper { width: 100%; margin-left: auto; margin-right: auto;
Let me know if I misunderstood your question or if this helped.
solution3
0 ACCPTED 2015-01-20 10:35:38
After several trial and error, I have came up with my own answer. It's a little bit of a hard-coded thing, but so far, this solves my problem in aligning wide divs responsively on any screen sizes.
$(window).on('resize', function() {
if ($(window).width() <= 1600) {
$(document).scrollLeft(0);
}
if ($(window).width() <= 1536) {
$(document).scrollLeft(40);
}
if ($(window).width() <= 1440) {
$(document).scrollLeft(110);
}
if ($(window).width() <= 1360) {
$(document).scrollLeft(130);
}
if ($(window).width() <= 1280) {
$(document).scrollLeft(170);
}
if ($(window).width() <= 1152) {
$(document).scrollLeft(235);
}
if ($(window).width() <= 1024) {
$(document).scrollLeft(300);
}
if ($(window).width() <= 800){
$(document).scrollLeft(400);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.