我正在制作网页。我正在尝试使div正确居中并对齐（动画公司徽标）。
我需要它们彼此并排放置，而不是彼此并排放置，两者之间要有一定的间距以适合页面。
这可能使事情更清楚：
这是我的代码：
<html>
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/CSS" href="Style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="container">
<h1>
<a href="a">My Interactive Webpage </a>
</h1>
<h1>
<a href="a">Career Page </a>
</h1>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="Information Page.html">Information</a></li>
<li><a href="Game Page.html">Games</a></li>
<li><a href="Career Page.html">Career</a></li>
</ul>
</header>
<div id="container">
<head>
<center>
<p><font face="verdana" color="green">Welcome to my Career Page!
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for. Please click the text to be taken to the respective homepage of each company.
</font></p>
</center>
</div>
<div class="tilt pic">
<style>
#rcorners3 {
border-radius: 25px;
background: url(http://i.imgur.com/AkIPWeF.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
<div class="tilt pic">
<style>
#rcorners2 {
border-radius: 25px;
background: url(http://i.imgur.com/Mouf1lw.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
<!DOCTYPE html>
<html>
<head>
<div class="tilt pic">
<style>
#rcorners4 {
border-radius: 25px;
background: url(http://i.imgur.com/pFeIHdd.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</body>
</html>
</body>
</html>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
最佳答案
正如其他人提到的那样，您的代码中有很多不必要的重复可以清除，但要回答您的问题，我建议您使用表格，特别是将width设置为100％的表格行来设置图像格式您希望他们像这样：
<table style="width: 100%;">
<tr>
<td>
<div class="tilt pic">
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
</td>
<td>
<div class="tilt pic">
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
</td>
<td>
<div class="tilt pic">
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</td>
最后，为了使图像在其各自的单元格内居中，您需要在每个ID中添加以下内容：
#rcorners3 {
margin-left:auto;
margin-right:auto;
...
}
#rcorners2 {
margin-left:auto;
margin-right:auto;
...
}
#rcorners4 {
margin-left:auto;
margin-right:auto;
...
}
这样可以确保元素的每一侧的间距相等，而不管实际上有多少可用空间。
请参见工作示例-http://jsfiddle.net/ddwqkm5t/1/
关于javascript - 对齐并居中div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34225974/