CSS居中于页面长度的一部分

时间:2017-02-09 23:49:23

标签: html

因此,我认为简单的事情由于某些原因而变得非常具有挑战性。基本上我在这里面临的挑战是,在较小的窗口中,我在扩展时需要使用相同的格式。虽然它在较小的窗口中,但是它完全居中,但是当它扩展时,它有太多的空间在右边。

我已按照不同帖子上的说明将其设置为固定位置,然后将边距设置为自动,但我现在看到没有&#39; ta&#34; min-margin-right。< / p>

<div style = 'position: fixed; z-index:4; left: 0; right: 0; top:80%; margin-left: auto; margin-right: auto; width: 50%; font-style: Courier; font-weight: bold; font-size: 25px;'>

&#13;
&#13;
<html>
<head>
	<title>Conquerer's Quest</title>
</head>
<body>
<div style='position:absolute;z-index:-3;left:0;top:0;width:100%;height:100%'>
  <img src='space.jpg' style='width:100%;height:100%' alt='[]' />
</div>
<!-- main game box -->
<div style='position:absolute;z-index:0;left:2%;top:3%;width:80%;height:75%; background-color: #900; border: 5px double black'>
	<canvas id = gameCanvas>	
	</canvas>
</div>
<!-- descriptions box -->
<div style='position:absolute;z-index:1;left:2%;top:78.5%;width:80%;height:20%; background-color: #656060;  border: 5px double black'>
	<canvas id = instructionsCanvas>	
	</canvas>
</div>
<!-- description header -->

<div style = 'position: fixed; z-index:4; left: 0; right: 0; top:80%; margin-left: auto; margin-right: auto; width: 50%; font-style: Courier; font-weight: bold; font-size: 25px;'>

<u align = "center">
		Conquerer's Quest Summary
		</u>
</div>
<!-- description text -->
<div style = 'position:absolute; z-index:4;top:82%;left:5%;right: 20%; font-style: Courier;font-weight: small; font-size: 21px;'>
<p align="center">
		<p1>Conquerer's Quests is an RPG following the adventures of you the player. You can choose between several classes including the swordsman, the assassain, the knight, the wizard, and the ranger. The main objective of the game is to locate and get into the Conquerer's Sanctuary but along the way the player can level up their character, sell and buy armor and weapons, and complete side quests.</p1>
</div>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您的代码似乎对我有用 - 至少就水平居中而言。你使用的是什么浏览器?也许这就是问题的根本原因?