CODEWITHSUNDEEP
css
Santiago Rebella
Santiago Rebella

Reputation: 2449

css centering elements without javascript

I just came across something

#element {
    left: 50%;
    margin-left: -(elemntwidth/2)px; 
}

being (elemntwidth/2) already a number like 30px, for ex.

I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery 

$('#element').css(left: (screenwidth - element / 2) + 'px');

More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks

Upvotes: 4

Views: 106

Answers (5)

algorhythm
algorhythm

Reputation: 8728

AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:

e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...

Try to scroll left and right to see the white left- and right-border...

The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements

It's been a long time when I started up with this unconventionally solution...

Upvotes: 1

Ignacio Correia
Ignacio Correia

Reputation: 3668

This is a way. For some elements it works, resposive, centered and no jQuery.

HTML

<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>

CSS

.element {
     position: relative;
     width: 90%;
     background: black;
     margin: 0 auto 10px;
     text-align: center;
     color: white;
     padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}

Wroking Demo | Final result full screen

Upvotes: 2

Jacob
Jacob

Reputation: 11

The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.

Note that you can use the same approach using percentage based widths to work better with responsive layouts.

You're on the right track.

Upvotes: 1

Ramin Omrani
Ramin Omrani

Reputation: 3761

use this code snippet:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(height/2);
  margin-left: -(width/2);
}

this works even if the parent dimensions change.

Upvotes: 1

Dan Kanze
Dan Kanze

Reputation: 18595

CSS Frameworks have this functionaility baked in. Checkout: Foundation 3

Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.

Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.

Upvotes: 2

Related Questions