1

I would like to display a square on a "mobile" WebApp. The width should be half of the screen size. On any screen. How to declare the height?

#square{
    position:absolute;
    background:black;
    width:50%;  
}

And how would I center such elements, with no fixed size?

thank you very much.

Cœur
  • 37,241
  • 25
  • 195
  • 267
user3144851
  • 39
  • 1
  • http://stackoverflow.com/a/6615994/2464634 – Preston S Mar 17 '14 at 21:24
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Cœur Oct 12 '18 at 02:55

2 Answers2

1

You should be able to do something along these lines:

.sq{
    padding-bottom: 50%;
    width: 50%;
    height: 0;
    background: red;
    margin:0 auto;
}

jsFiddle example

To center vertically and horizontally, try:

.sq{
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background: red;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
0

I'm guessing you mean height:50% or how much of the screen you want to cover. Then, you put left:25%; top:25%; position:absolute; and it should be centered. You may want to change absolute to fixed in the event that you want to the square to never move. You end with .box {background-color:#000000; /*makes box black*/ height:50%/*change to 100% if want square on computer screen*/; width:50%; /*makes your box*/ left:25%; top:25%/*change this when you change height of box*/; position:absolute; /*positions your box*/} and your HTML would be:
<html>
<head>
<style>
.box {background-color:#000000; /*makes box black*/ height:50%/*change to 100% if want square on computer screen*/; width:50%; /*makes your box*/ left:25%; top:25%/*change this when you change height of box*/; position:absolute; /*positions your box*/}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

curiouscrab
  • 3
  • 3