对齐并居中div

Question

I am making a web page. 我正在制作网页。 I am trying to centre and align my divs properly (the animated company logos). 我正在尝试使div正确居中并对齐（动画公司徽标）。

I need them to sit next to each other instead of on top of each other, with spacing in between to fit the page. 我需要它们彼此并排放置，而不是彼此并排放置，并在它们之间留出一定的间距以适合页面。

This might make things more clear: 这可能使事情更清楚：

Here is my code: 这是我的代码：

<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>

Answer 1

As mentioned already there are a lot of errors, I really tried to go through it, but it actually would take quite a while... 正如已经提到的，有很多错误，我确实尝试解决了这个问题，但是实际上要花相当长的时间...

Here is an first attempt of removing some errors: https://jsfiddle.net/6qfq1c7g/ 这是消除一些错误的首次尝试： https : //jsfiddle.net/6qfq1c7g/

However, you should not use this code since there are still many mistakes. 但是，由于仍然存在许多错误，因此不应使用此代码。

Please consider to read something about classes and the html basic structure which should be something like http://www.w3schools.com/html/html_intro.asp 请考虑阅读有关类和html基本结构的内容，这些内容应类似于http://www.w3schools.com/html/html_intro.asp

Do not use <html> or <head> or <body> twice. 请勿两次使用<html>或<head>或<body> 。

You can of course use <style> tags within your html but you should at least put them all together so you are not switching between html and css all the time. 当然，您可以在html中使用<style>标记，但至少应将它们放在一起，以免您始终无法在html和css之间切换。 Best practice would be creating a separate file for your css as you already implement in your head (style.css). 最佳实践是为已经在头脑中实现的CSS创建一个单独的文件（style.css）。

Use classes for same elements. 将类用于相同的元素。 Your "company" elements are basically all the same, so you should do something like 您的“公司”元素基本上都是相同的，因此您应该执行以下操作

.company {
   border: 1px solid #333;
   border-radius: 5px;
   // and so on ....
}

For the background then you can use specific ids or even classes again 对于背景，则可以再次使用特定的ID甚至类

.blizzard {
  background-color: url('blizzard.jpg');
}

.ubisoft {
   background-color: url('ubisoft.jpg');
}

This will clean up your code a lot. 这将清理您的代码很多。

Actual response: 实际回应：

To align your 3 elements every element needs the css style 要对齐3个元素，每个元素都需要CSS样式

display: inline-block;

I also recommend to give 我也建议给

vertical-align: top;

so that everything is aligned on the same height. 这样所有东西都对齐在同一高度。 To center it then again you should add 要再次居中，您应该添加

margin: 0 auto;

And the outer wrapping element should have 并且外包装元件应具有

text-align: center;

Answer 2

As others have mentioned there is a lot of unnecessary repetition in your code that can be cleaned up but to answer your question I'd suggest using a table, specifically a table row with its width set to 100% to format your images how you want them like so: 正如其他人提到的那样，您的代码中有很多不必要的重复可以清除，但要回答您的问题，我建议您使用表格，特别是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>

And lastly in order to center your images within their respective cells you need to add the following to each of their ids: 最后，为了使图像在其各自的单元格内居中，您需要在每个ID中添加以下内容：

#rcorners3 {
margin-left:auto;
margin-right:auto;
...
}

#rcorners2 {
  margin-left:auto;
  margin-right:auto;
  ...
}

#rcorners4 {
  margin-left:auto;
  margin-right:auto;
  ...
}

This makes ensures that the spacing on each side of the element is equal regardless of how much space is actually available. 这样可以确保元素的每一侧的间距相等，而不管实际上有多少可用空间。

See working example - http://jsfiddle.net/ddwqkm5t/1/ 参见工作示例-http://jsfiddle.net/ddwqkm5t/1/

Answer 3

you can try this one: 您可以尝试以下一种方法：

<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="float:left; padding:10px;">

<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="float:left; padding:10px;">    
        <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="float:left; padding:10px;">    
        <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>

对齐并居中div

问题描述

3 个解决方案

解决方案1
0 2015-12-11 14:55:55

解决方案2
0 2015-12-11 15:19:18

解决方案3
-1 2015-12-11 14:43:23

对齐并居中div

问题描述

3 个解决方案

解决方案1 0 2015-12-11 14:55:55

解决方案2 0 2015-12-11 15:19:18

解决方案3 -1 2015-12-11 14:43:23

解决方案1
0 2015-12-11 14:55:55

解决方案2
0 2015-12-11 15:19:18

解决方案3
-1 2015-12-11 14:43:23