0

This looks like a very simple problem but I can't find the answer:

I want to center a div with fixed width of 500px. Markup and styling is as follows:

<div>
Lorem ipsum dolor sit amet, diceret delectus ea quo, ne eum essent legendos tacimates. Vel at perfecto omittantur. Iusto dolores sed an, error copiosae at his. Laoreet veritus vocibus te mel. An eos assum nobis vituperata, pro ad labitur facilis.
</div>

body {text-align:center;}
div {display:inline-block;width:500px;}

This works well when the viewport is wider than my div. However when the viewport gets smaller than my div, it is no longer centered but overflows to the right. I want my div to overflow on both sides of the viewport so it stays centered. Is this possible with CSS?

body {text-align:center;}
div {display:inline-block;width:500px;}
<div>
Lorem ipsum dolor sit amet, diceret delectus ea quo, ne eum essent legendos tacimates. Vel at perfecto omittantur. Iusto dolores sed an, error copiosae at his. Laoreet veritus vocibus te mel. An eos assum nobis vituperata, pro ad labitur facilis.
</div>
Nimantha
  • 6,405
  • 6
  • 28
  • 69
kore24
  • 37
  • 6
  • 1
    `left: 50%;` `margin-left: -250px; /* Half of width */` take a look [here](http://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div) – Xorifelse Mar 02 '16 at 20:32
  • Like this https://jsfiddle.net/j08691/52n765ob/? – j08691 Mar 02 '16 at 20:43
  • Thanks, it must overflow to both left and right, no other way than position:fixed though? Just curious. – kore24 Mar 02 '16 at 20:51
  • @Xorifelse anyway your comment DID solve my problem, can i accept comments as an answer? :) – kore24 Mar 02 '16 at 21:34
  • You can upvote comments ;) That trick is so widely known I cannot take credit for it. – Xorifelse Mar 02 '16 at 22:06

2 Answers2

0

First off why would someone ever zoom in that far to that. Now I think you would have to do something like overflow: hidden; into the css and that should work. This question could already be answered at is this the answer you're looking for?

Community
  • 1
  • 1
MCC
  • 512
  • 1
  • 5
  • 23
0

Here you go

Working JSFIDDLE

@media (max-width: 500px) {
  div {
      width:auto;
  }

}

It will still be 500px wide, but when enter a smaller screen, in this example 500px wide, it will get the width:auto property, and allow the text to stay centerered and stay on the screen.

You can read more about media queries here

Hope this helped you out :)

// Marc Hjorth

Marc Hjorth
  • 1,797
  • 2
  • 18
  • 24