Question

我想在＆＃34;移动＆＃34;上显示一个正方形Web应用程序。宽度应为屏幕尺寸的一半。在任何屏幕上。如何申报身高？

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

我如何将这些元素居中，没有固定的大小？

非常感谢你。

Answer 1

你应该能够沿着这些方向做点什么：

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

<强> jsFiddle example

要水平居中和，请尝试：

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

<强> jsFiddle example

Answer 2

我猜你的意思是height:50%或者你要覆盖多少屏幕。然后，你放left:25%; top:25%; position:absolute;，它应该居中。如果您希望方块永不移动，您可能希望将绝对值更改为固定值。以.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*/}结尾，您的HTML将是：
<html> {
{1}} {
{1}} {
{1}} {
{1}} {
{1}} {
{1}} {
{1}} {
{1}} {
{1}}

绘制宽度为4的正方形的广场？

2 个答案: