Question

因此，当用户首次打开网站时，我需要在屏幕中间显示<div>，我尝试设置宽度为百分比并将<div>放在<center>内标记，但在两种情况下缩放都无法正常工作。如何将<div>放在屏幕中央而不会出现缩放问题？

通过“缩放不起作用”我的意思是当我放大太多它停止增加宽度，同时仍然增加高度和内容，所以它增加了换行符，一切看起来完全错误

感谢您的回复，但您的建议都有我描述过的问题。到目前为止唯一的出路是将位置设置为绝对位置并以cm为单位手动设置“顶部”，“左侧”，“宽度”和“高度”参数。看看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../../../All Files/HTML/Project/special.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class='centering'>
      <div class='content'>
test test test test test test test test test test test test test test
      </div>
</div>
</body>
</html>

和css文件：

.centering {
    text-align: center;
    background-color:#646464;
}
.content {
    text-align: left;
    margin: 0 auto;
    width:50%;
    background-color:#2B2B2B;
}

我非常感谢您花时间帮助我！

Answer 1

例如，如果你的div是：

<div id="content">
  //div content
 </div>

然后在你的css中使用：

   #content {
  width: 50%;
  margin: 0 auto;
  }

只需根据需要更改宽度。

Answer 2

你有这个：

<center>
    <div>
    </div>
</center>

请改为尝试：

<div class="centering">
    <div class="content">
        Text here!
    </div>
</div>

并在你的CSS中：

.centering {
    text-align: center;
}
.content {
    text-align: left;
    margin: 0 auto;
    width:50%;
}

Answer 3

你可以这样使用。

.wrapper{
      width:50%;
      margin:0 auto;
}

.content{
      float:left;
}

<div class='wrapper'>
      <div class='content'>
           //your content
      </div>
</div>

或者对于内容选择器，您还可以将text-align属性指定为左侧。

宽度设置为百分比时的HTML缩放div

3 个答案: