Question

我正在刷新我的HTML / CSS技能并试图构建一个网站，其中元素会自动调整到不同的屏幕尺寸;例如，对于header我使用以下代码：

#header{
    position: absolute;
    top: 10%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 500px;
    height: 100px;
    border:thin solid black;
}

随着标题我希望保持元素居中并调整到不同屏幕的大小，但我上面的代码是有缺陷的，因为

没有居中
如果我给它宽度为500px，我认为它将保持固定的500px并且不会调整到不同的分辨率......

这是一个看起来像的图像，注意元素不居中。 enter image description here

我在这里做错了什么？

Answer 1

您可以使用相对百分比设置width，例如50%，实际宽度将是父宽度的50％。要将绝对标题居中，您可以将其left和right设置为0和margin:0 auto：

#header{
  position: absolute;
  top: 10%;    
  left:0;
  right:0;
  margin:0 auto;
  width: 50%;
  height: 100px;
  border:thin solid black;
  text-overflow:ellipsis;
  overflow:hidden;
}

Demo.

Answer 2

习惯了

#header{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -250px;
    width: 500px;
    height: 100px;
    border:thin solid black;
}

Answer 3

当使用顶部/左侧值居中div时，给它50％是正确的，但你必须记住用高度/宽度的一半减去边距。对于宽度，您可以使用max-width代替，这意味着如果有足够的空间，div将是500px宽，否则它会拉伸，好像它有一个百分比宽度

这是我的代码

    #header{
        position: absolute;
        top: 10%;
        left: 50%;
        margin-top: -50px;
        margin-left: -250px;
        max-width: 500px;
        height: 100px;
        border:thin solid black;
    }

HTML / CSS - 自动调整不同屏幕尺寸的元素大小

3 个答案:

Demo.