Question

我有此代码，但在网页边缘不合常规。

<html>
	<head>
		<style type="text/css">
			body {
				height: 100%;
				width: 100%;
  				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			}
			.content {
				text-align:center;
				display: table-cell;
				vertical-align: middle;
   				padding-left: 40px;
				padding-right: 40px;
				padding-top: 50px;
				padding-bottom: 50px;
				letter-spacing: 1px;
			}
			code {
				font-family: "Sans Mono", "Consolas", "Courier", monospace;
				font-size: 12px;
			}
			.code-container {
				width: 100%;
				position: relative;
				
				box-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 2px 25px rgba(0, 0, 0, 0.6);
			}
			.code-numbers {
				font-family: "Sans Mono", "Consolas", "Courier", monospace;
				font-size: 12px;
				float: left;
				color: rgb(128, 128, 128);
				border-right: 1px solid rgb(128, 128, 128);
				width: 15px;
				padding: 0px;
				padding-left: 20px;
				padding-right: 5px;
				user-select: none;
				text-align: right;
			}
			.code-line {
				font-family: "Sans Mono", "Consolas", "Courier", monospace;
				font-size: 12px;
				float: right
				padding: 0px;
				padding-left: 7px;
				padding-right: 30px;
				white-space: pre;
				text-align: left;
				overflow: auto;
            }
		</style>
	</head>
	<body>
		<div class="content">
			<div class="code-container"><div class="code-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div><div class="code-line">:local iname "ether2";
ip firewall mangle
add action=mark-connection chain=prerouting comment=CommentABCDEF in-interface=$iname new-connection-mark=CommentABCDEF protocol=tcp
add action=mark-connection chain=postrouting comment=D-FUP-Upload new-connection-mark=D-FUP-Upload out-interface=$iname protocol=tcp
add action=mark-packet chain=prerouting comment=CommentERRWWRHEWRHR connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=CommentERRWWRHEWRHR passthrough=no protocol=tcp
add action=mark-packet chain=prerouting comment=Comment2462436246234 connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment2462436246234 passthrough=no protocol=tcp
add action=mark-packet chain=prerouting comment=Comment35437345434263426 connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment35437345434263426 passthrough=no protocol=tcp

system scheduler
add interval=2s name=D-FUP-Processor on-event=D-FUP-Processor policy=ftp,reboot,read,write,policy,test,password,sniff,sensitive start-time=startup
			</div></div>
		</div>
	</body>
</html>

当前，它超出页面边界，我不想超出页面边缘。我想让div窗口的宽度居中，网页的高度居中，但我不知道如何。

有什么想法吗？

代码在JSFiddle服务器上的演示中： Demo jsfidle

Answer 1

您需要添加固定宽度以替换100％，以使其停止离开页面（因为其中的内容确实很大）。如果需要完全响应，可以使用媒体查询根据屏幕大小更改此宽度。

.container{
    margin:unset;
}

为了将其放置在屏幕中央，请在“ content”类div中添加以下代码。

.code-container {
    width: 500px;
}

编辑： https://jsfiddle.net/fojumaz1/

Answer 2

这是更新的代码段，其中包含您想要的内容，您遇到了一些错误，影响了它，通常是关于框大小和定义的宽度。

https://jsfiddle.net/b5ryhg4e/

body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
}

.content {
  text-align: center;
  margin: 0 auto;
  padding-top: 40px;
  letter-spacing: 1px;
}

code {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 12px;
}

.code-container {
  width: 90%;
  margin: 0 auto;
  position: relative;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 2px 25px rgba(0, 0, 0, 0.6);
}

.code-numbers {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 12px;
  float: left;
  color: rgb(128, 128, 128);
  border-right: 1px solid rgb(128, 128, 128);
  width: 15px;
  padding: 0px;
  padding-left: 20px;
  padding-right: 5px;
  user-select: none;
  text-align: right;
}

.code-line {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 12px;
  float: right padding: 0px;
  padding-left: 7px;
  padding-right: 30px;
  white-space: pre;
  text-align: left;
  overflow: auto;
}

<div class="content">
  <div class="code-container">
    <div class="code-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div>
    <div class="code-line">:local iname "ether2"; # WAN Interface /ip firewall mangle add action=mark-connection chain=prerouting comment=CommentABCDEF in-interface=$iname new-connection-mark=CommentABCDEF protocol=tcp add action=mark-connection chain=postrouting comment=D-FUP-Upload
      new-connection-mark=D-FUP-Upload out-interface=$iname protocol=tcp add action=mark-packet chain=prerouting comment=CommentERRWWRHEWRHR connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=CommentERRWWRHEWRHR passthrough=no protocol=tcp
      add action=mark-packet chain=prerouting comment=Comment2462436246234 connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment2462436246234 passthrough=no protocol=tcp add action=mark-packet chain=prerouting comment=Comment35437345434263426
      connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment35437345434263426 passthrough=no protocol=tcp /system scheduler add interval=2s name=D-FUP-Processor on-event=D-FUP-Processor policy=ftp,reboot,read,write,policy,test,password,sniff,sensitive
      start-time=startup
    </div>
  </div>
</div>

我建议您更多地考虑包装盒的尺寸，这是一个很好的起点： http://www.tipue.com/blog/center-a-div/

作为对您的评论和想要实现的目标的进一步编辑，请参见下面的代码段： https://jsfiddle.net/k2s9Lfng/

您已在“内容” Div上设置了一个高宽比，将其扔掉，并且body元素也应显示为“ vh”而不是“％”-现在显示高度和宽度的中心，在“代码容器”上设置最大高度。此外，在边距方面-为了使其居中，您应该使用margin: 0 auto;而不是margin: auto;-为了更好地解释为什么需要这样做，请查看以下答案： Is there any difference between "margin: 0 auto;" and "margin: auto;"

如何在网页上居中放置div元素？

2 个答案: