对齐和居中div

时间：2015-12-11 14:37:51

标签： javascript jquery html css

我正在制作一个网页。我正在努力使我的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>

3 个答案:

答案 0 :(得分：0)

如上所述，已经有很多错误，我真的试图通过它，但它实际上需要一段时间......

以下是删除某些错误的第一次尝试：https://jsfiddle.net/6qfq1c7g/

但是，您不应该使用此代码，因为仍然存在许多错误。

请考虑阅读有关类和html基本结构的内容，这应该类似于http://www.w3schools.com/html/html_intro.asp

请勿两次使用<html>或<head>或<body>。

你当然可以在你的html中使用<style>标签，但你至少应该将它们全部放在一起，这样你就不会在html和css之间切换。最好的做法是为你的css创建一个单独的文件，因为你已经在头脑中实现了（style.css）。

使用相同元素的类。你的“公司”元素基本上都是一样的，所以你应该做类似

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

对于后台，您可以再次使用特定ID甚至类

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

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

这会清理你的代码。

实际回复：

要对齐3个元素，每个元素都需要css样式

display: inline-block;

我还建议给予

vertical-align: top;

这样所有东西都在同一高度上对齐。要使它居中，然后再添加

margin: 0 auto;

外包装元素应该

text-align: center;

答案 1 :(得分：0)

正如其他人提到的那样，你的代码中有很多不必要的重复可以清理但是为了回答你的问题，我建议使用一个表格，特别是一个带有 {{1}的表格行设置为100％以按照您希望的方式格式化图像：

width

最后，为了将图像置于各自的单元格中，您需要在每个ID中添加以下内容：

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

这样可以确保元素每一边的间距相等，无论实际可用的空间有多大。

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

答案 2 :(得分：-1)

你可以尝试这个：

<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>
相关问题
最新问题