CODEWITHSUNDEEP
htmlcss
Navid777
Navid777

Reputation: 3681

Element is not centered when it reaches max-width

I have an element in my HTML that has this style:

{
   max-width: 1500;
   padding-rigth: 40px;
   padding-left: 40px;
   width: auto;
}

when the screen is less than 1580px everything is ok and the element is centered in the screen, but when the screen goes larger than that the element is not centered and sticks to the right of screen(with a 40px padding).

what can I do to center the element when the screen is larger than 1580px?

Upvotes: 0

Views: 67

Answers (3)

Timmah
Timmah

Reputation: 1335

You can use margin: 0 auto;. In this example, the #center div will expand up to 1500px, then stay centered inside its parent div:

HTML

<div>
    <div id="center"></div>
</div>

CSS

#center {
   max-width: 1500px;
   margin: 0 auto
   width: auto;
}

Note, if you want to specify your values, you should really assign a unit of measurement so the browser knows how to handle it, i.e. 1500px rather than just 1500. Also, padding-rigth looks like a typo, and won't do anyting anyway as it's not a valid CSS property :)

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99544

when the screen is less than 1580px everything is ok and the element is centered in the screen

I assume that the element is a block-level element, right? If so you just need to give a margin-left/margin-right of auto to achieve the alignment.

{
   max-width: 1500;
   padding-rigth: 40px;
   padding-left: 40px;
   width: auto;
   margin-left: auto;
   margin-right: auto;
}

Upvotes: 1

vitdes
vitdes

Reputation: 124

Add margin: 0 auto;

  {
   max-width: 1500;
   padding-rigth: 40px;
   padding-left: 40px;
   width: auto;
   margin: 0 auto;
  }

Upvotes: 1

Related Questions