中心容器

时间：2016-03-16 10:40:02

标签： html css

我想将两个容器水平放置在网站上。 因此，右侧带有徽标的菜单和内容块应居中。 我尝试了很多东西，但没有任何作用。 直到现在我使用框架，但现在我想使用容器。 你能帮我吗？

非常感谢！

最好的问候，Ronny 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Containertest</title>
<style type="text/css">

body { margin:0; background-color: #333333;}

.wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
    /* background: url("ronny_logo.jpg"); */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 0;
}

/* MENU */
#main_menu{
    margin:0px;
    padding:0;
    height: 150px;
    /* width: 100%;      /* Breite vom Hauptmenü Container */
    padding: 0px 0;
    /*overflow: hidden; Remove this*/
    position: fixed;
    background-color: black;
    z-index: 2;
}
#main_menu li{
    list-style: none;
    float: left;
    line-height: 30px;
    margin-left: 10px;
    width: 130px;
    text-align: center;
    margin-top: 120px;
    position: relative;
}
#main_menu li a, #footer_menu li a {
    color: #FFFFFF;
    text-shadow: 0px 1px 1px #000;
    display: block;
    font-family: 'PT Sans', sans-serif;
    text-decoration: none;
    font-size: 12pt;
}
#main_menu .logo{
    background: none;
    width: 445px;
    margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
    text-decoration: underline;
}
#main_menu li .submenu{
    display: none;
    margin: 0;
    padding: 0;
    z-index: 10;
    position: absolute;
    left: 0;
    top:100%;
}
#main_menu li .submenu:hover{
    display: block;
}
#main_menu li a:hover + .submenu{
    display: block;
}
#main_menu li .submenu li{
    margin: 0;
    padding: 0;
}
#main_menu li .submenu li a{
    font-size: 9pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }

/* CONTENT */
#content{
    padding: 20px 0;
    overflow: hidden;
    margin:  0;
    padding: 20px;
    font-size: 9pt;
    color: #FFFFFF;
    background-color: #555555;
    width: 965px;
}

</style>
</head>

<body>
<div class="wrapper">
    <div class="patterned">
        <div class="container">
            <ul id="main_menu">
                <li class="logo">
                    <a href="#">
                        <img src="ronny_logo.jpg" alt="Logo"/>
                    </a>
                </li>
                <li class="red">
                    <a href="#">Home</a>
                </li>
                <li class="green">
                    <a href="#">Evenementen</a>
                    <ul class="submenu">
                        <li>
                            <a href="#">Item</a>
                        </li>
                        <li>
                            <a href="#">Item</a>
                        </li>
                        <li>
                            <a href="#">Item</a>
                        </li>
                    </ul>
                </li>
                <li class="blue">
                    <a href="#">Bus</a>

                </li>
                <li class="orange">
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div id="content">
            <p>fadsfdsfdas</p>
            <p>dfsadfaf</p>
            <p>d</p>
            <p>d</p>
            <p>d</p>
            <p>d</p>
            <p>&nbsp;</p>
            <p>gg</p>
            <p>&nbsp;</p>
            <p>g</p>
        </div>
    </div>
</div>



</body>
</html>

lookout http://i67.tinypic.com/kbegro.jpg

2 个答案:

答案 0 :(得分：1)

最简单的方法是为您的容器添加width并将margin设置为0（顶部底部）auto（左侧）以及position: relative所以浏览器可以根据父实例{@ 1}}类中的父容器找出位置。

.wrapper

通过将父类放在子类的前面，您可以选择性地定位特定容器，因此如果您有两个具有相同类的容器，则可以对它们进行定向和设置样式。

答案 1 :(得分：0)

使用flex属性的另一种解决方案：

<style>
    body { 
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #333333;
    }
    .wrapper{
      min-height: 100%;
      height: auto !important;
      height: 100%;
      position: relative;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      z-index: 0;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    #main_menu{
      margin:0;
      padding:0;
      height: 150px;
      padding: 0px 0;
      position: fixed;
      background-color: black;
      z-index: 2;

      width: 965px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #main_menu li{
      list-style: none;
      float: left;
      line-height: 30px;
      margin-left: 10px;
      width: 130px;
      text-align: center;
      margin-top: 120px;
      position: relative;
    }
    #main_menu li a, #footer_menu li a {
      color: #FFFFFF;
      text-shadow: 0px 1px 1px #000;
      display: block;
      font-family: 'PT Sans', sans-serif;
      text-decoration: none;
      font-size: 12pt;
    }
    #main_menu .logo{
      background: none;
      width: 445px;
      margin: 0;
    }
    #main_menu li a:hover, #footer_menu li a:hover{
      text-decoration: underline;
    }
    #main_menu li .submenu{
      display: none;
      margin: 0;
      padding: 0;
      z-index: 10;
      position: absolute;
      left: 0;
      top:100%;
    }
    #main_menu li .submenu:hover{
      display: block;
    }
    #main_menu li a:hover + .submenu{
      display: block;
    }
    #main_menu li .submenu li{
      margin: 0;
      padding: 0;
    }
    #main_menu li .submenu li a{
      font-size: 9pt;
    }
    .red, .red .submenu{ background-color: #ed3327; }
    .blue, .blue .submenu{ background-color: #9dbdd5; }
    .green, .green .submenu{ background-color: #6fb145; }
    .orange, .orange .submenu{ background-color: #f5832e; }
    .yellow, .yellow .submenu{ background-color: #f6ec35; }

    #content{
      overflow: hidden;
      margin-top: 150px;
      font-size: 9pt;
      color: #FFFFFF;
      background-color: #555555;
      width: 965px;
    }
</style>
<body>
  <div class="wrapper">
    <ul id="main_menu">
      <li class="logo">
        <a href="#">
          <img src="ronny_logo.jpg" alt="Logo"/>
        </a>
      </li>
      <li class="red">
        <a href="#">Home</a>
      </li>
      <li class="green">
        <a href="#">Evenementen</a>
        <ul class="submenu">
          <li>
            <a href="#">Item</a>
          </li>
          <li>
            <a href="#">Item</a>
          </li>
          <li>
            <a href="#">Item</a>
          </li>
        </ul>
      </li>
      <li class="blue">
        <a href="#">Bus</a>
      </li>
      <li class="orange">
        <a href="#">Contact</a>
      </li>
    </ul>
    <div id="content">
      <p>fadsfdsfdas</p>
      <p>dfsadfaf</p>
      <p>d</p>
      <p>d</p>
      <p>d</p>
      <p>d</p>
      <p>&nbsp;</p>
      <p>gg</p>
      <p>&nbsp;</p>
      <p>g</p>
    </div>
  </div>
</body>

绝对不需要更多的div。

干杯！

相关问题
最新问题