堆栈内存溢出
  繁体   English   中英

对齐并居中div

[英]Align and centre divs

 原文  2015-12-11 14:37:51  1   3    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 个解决方案

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

正如已经提到的，有很多错误，我确实尝试解决了这个问题，但是实际上要花相当长的时间...

这是消除一些错误的首次尝试： 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;

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

正如其他人提到的那样，您的代码中有很多不必要的重复可以清除，但要回答您的问题，我建议您使用表格，特别是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/

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

您可以尝试以下一种方法： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何基于百分比对齐中心或底部的内部div 如何将这些div在中心水平对齐？ 如何使 div 垂直和水平居中对齐？ 如何在具有动态尺寸的包装 div 中将 3 个 div 垂直居中对齐在最左侧、最右侧和绝对中心？ 如何使用JavaScript按中心对齐2张图像 在 CSS 中，居中对齐的图像与 Position 冲突 如何在Javascript PhoneGap应用程序中居中对齐弹出窗口 将div与顶部内联对齐 如何水平对齐div？ 如何在DOM中对齐div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM