html - 为什么我不能将 Logo 居中，这与格式有关吗？

标签 html css

任何帮助都会很棒。我在 Photoshop CC 中创建了一个 Logo ，但出于某种原因我无法将其置于页面中心。我可能会忽略一些简单的事情，但我被困住了。我尝试过固定、相对和绝对定位(我不想使用绝对定位)，但 Logo 只是稍微 float 到导航栏的右侧。我一直在使用标题，但我想我需要创建一个新的 id 来包含它。我只是不明白为什么会这样。

HTML:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="adv_web.css">
<!--link-->
</head>
<body>


<div id="wrapper">
  <div id="header">
    <h1><img src="logo_6.png" width="1200" height="110" alt="logo"></h1>
    <!--need logo-->
    </div>
       <div id="nav">
<ul>
  <li><a href="index.html">Home</a></li> 
  <li><a href="concept.html">Concept</a></li>
  <li><a href="menu.html">Menu</a></li>
  <li><a href="contact.html">Contact Us</a></li>
  <li><a href="find.html">Find Us</a></li>
</ul>
</div>


<h2>Join Us For A Great Time</h2>
<!--<p>More than a place to eat, it's a place to meet!</p>-->

<div class="photos">
<table>
<tr>
<td><img src="rib_fl.jpg" width="250" height="190" alt="Grilled Ribeye"></td>
<td><img src="sirloin.jpg" width="250" height="190" alt="Sirloin steak"></td>
<td><img src="Ribeye.jpg" width="250" height="190" alt="Ribeye"></td>
<tr>
<td><img src="t_bone.jpg" width="250" height="190" alt="t_bone steak"></td>
<td><img src="filet.jpg" width="250" height="190" alt="Filet dish"></td>
<td><img src="p_rib.jpg" width="250" height="190" alt="prime rib carved"></td>
</tr>
</table>
</div>

<div id="content">
<table>
  <tr>
    <td><img src="sub_1.jpg" width="250" height="170" alt="Bottle Red"></td>
    <td><img src="sub_2.jpg" width="250" height="170" alt="Bottle Red"></td>
    <td><img src="sub_3.jpg" width="250" height="170" alt="Bottle Red"></td>
  </tr>
 </table>
 </div>
  <div id="footer">
  <p>Copyright &copy; The Beef Warehouse: 2014-<a href="mailto:thebeefwarehouse@gmail.com">thebeefwarehouse@gmail.com</a></p>
  </div>

</div>

</body>
</html>

CSS:

body { 
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 100%;
   /* background-color: #fff;*/
    background-image: url("wood_1.jpg");
    width: 100%;
    margin: 0 auto;
    background-color: #000;


}
#header{ 
        width: 1200px;
        padding: 20px;
        position: relative;
        margin: 0 auto;


}
article {
    padding: 0 25px;
    margin-top: 25px;
}
#wrapper { background-color: transparent;
           color: #000066;
           width: 900px;
           margin: 0 auto;
           min-width: 400px;


}
#nav { background-color: #4c0000;
       height: 50px;
       border-radius: 5px;
}
#nav ul {
    height: 30px;
    width: 750px;
    margin: 0 auto;


}
#nav ul li {
        list-style-type: none;
        width: 150px;
        float: left;
        text-align: center;
}
#nav ul li a {
        text-decoration: none;
        color: #fff;
        line-height: 30px;
        display: block;

}
#nav li a:hover {
        background-color: black;
        color: blue;
}


#gallery { padding: 0 25px;
           margin-top: 25px;
}
table, tr { 
           text-align: center;
           width: 100%;
           margin: 20px auto;
           border-collapse: collapse;
           border-radius: 10px 5px;


}
photos {
           margin: 0 auto;
           width: 794px;
           padding: 10px;
           background-color: #fff;
           border-radius: 10px 5px;
}
#content { width: 100%;
           background-color: transparent;
           color: #000000;
           padding: 10px 0;
           overflow: auto;
           margin: 0 auto;
           /*text-align: center;*/
}
h1 { 
    margin: 0 auto;
    /*color: #fff;*/
    text-align: center;
    padding-top: 25px;
    width: 1200px;
    position: relative;



}
h2  { margin: 10px;
    padding: 15px;
    color: blue;
    font-size: 20px;
    font-weight: bold;
    text-align: center;

}

ul {    text-decoration: none;
        list-style-type: none;
        margin: 10px;
        padding: 10px;
        text-align: center;
}
li { 
    display: inline;
}
#footer { font-size: 90%; 
          text-align: center;
          position: relative;
          bottom: 0;
          margin: 0;
          color: #fff;
}

我对此感到非常沮丧。我只需要一个答案。

最佳答案

你可以这样做:

JSFiddle - DEMO或 Full Screen DEMO

HTML:

<div id="header">
     <h1><img src="logo_6.png" width="1200" height="110" alt="logo"></h1>

    <!--need logo-->
</div>
<div id="wrapper">
    <div id="nav">
        <ul>
            <li><a href="index.html">Home</a>

            </li>
            <li><a href="concept.html">Concept</a>

            </li>
            <li><a href="menu.html">Menu</a>

            </li>
            <li><a href="contact.html">Contact Us</a>

            </li>
            <li><a href="find.html">Find Us</a>

            </li>
        </ul>
    </div>

<h2>Join Us For A Great Time</h2>

    <!--<p>More than a place to eat, it's a place to meet!</p>-->
    <div class="photos">
        <table>
            <tr>
                <td>
                    <img src="rib_fl.jpg" width="250" height="190" alt="Grilled Ribeye">
                </td>
                <td>
                    <img src="sirloin.jpg" width="250" height="190" alt="Sirloin steak">
                </td>
                <td>
                    <img src="Ribeye.jpg" width="250" height="190" alt="Ribeye">
                </td>
                <tr>
                    <td>
                        <img src="t_bone.jpg" width="250" height="190" alt="t_bone steak">
                    </td>
                    <td>
                        <img src="filet.jpg" width="250" height="190" alt="Filet dish">
                    </td>
                    <td>
                        <img src="p_rib.jpg" width="250" height="190" alt="prime rib carved">
                    </td>
                </tr>
        </table>
    </div>
    <div id="content">
        <table>
            <tr>
                <td>
                    <img src="sub_1.jpg" width="250" height="170" alt="Bottle Red">
                </td>
                <td>
                    <img src="sub_2.jpg" width="250" height="170" alt="Bottle Red">
                </td>
                <td>
                    <img src="sub_3.jpg" width="250" height="170" alt="Bottle Red">
                </td>
            </tr>
        </table>
    </div>
    <div id="footer">
        <p>Copyright &copy; The Beef Warehouse: 2014-<a href="mailto:thebeefwarehouse@gmail.com">thebeefwarehouse@gmail.com</a>

        </p>
    </div>
</div>

CSS:

body {
    font-family:"Comic Sans MS", cursive, sans-serif;
    font-size: 100%;
    /* background-color: #fff;*/
    background-image: url("wood_1.jpg");
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    background-color: #000;
}
#header {
    width: 1200px;
    padding: 20px;
    position: relative;
    margin: 0 auto;
}
article {
    padding: 0 25px;
    margin-top: 25px;
}
#wrapper {
    background-color: transparent;
    color: #000066;
    width: 900px;
    margin: 0 auto;
    min-width: 400px;
}
#nav {
    background-color: #4c0000;
    height: 50px;
    border-radius: 5px;
}
#nav ul {
    height: 30px;
    margin: 0 auto;
    display: table;
}
#nav ul li {
    list-style-type: none;
    width: 150px;
    float: left;
    text-align: center;
}
#nav ul li a {
    text-decoration: none;
    color: #fff;
    line-height: 30px;
    display: block;
}
#nav li a:hover {
    background-color: black;
    color: blue;
}
#gallery {
    padding: 0 25px;
    margin-top: 25px;
}
table, tr {
    text-align: center;
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
    border-radius: 10px 5px;
}
photos {
    margin: 0 auto;
    width: 794px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px 5px;
}
#content {
    width: 100%;
    background-color: transparent;
    color: #000000;
    padding: 10px 0;
    overflow: auto;
    margin: 0 auto;
    /*text-align: center;*/
}
h1 {
    margin: 0 auto;
    /*color: #fff;*/
    text-align: center;
    padding-top: 25px;
    width: 1200px;
    position: relative;
}
h2 {
    margin: 10px;
    padding: 15px;
    color: blue;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
ul {
    text-decoration: none;
    list-style-type: none;
    margin: 10px;
    padding: 10px;
    text-align: center;
}
li {
    display: inline;
}
#footer {
    font-size: 90%;
    text-align: center;
    position: relative;
    bottom: 0;
    margin: 0;
    color: #fff;
}

关于html - 为什么我不能将 Logo 居中，这与格式有关吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25829778/

上一篇：javascript - 调整大小时在主体上滚动背景图像

下一篇：html - 根据语言 CSS 更改字体

相关文章：

php - 并排显示 CSS 框

css - VSCode 如何将 css 片段导入 less/sass/postcss

javascript - jquery 脚本在桌面上工作，但在 iphone 上滞后

html - CSS嵌套的flexbox为什么在有空间时最后一个字换行？

javascript - 如何计算元素绝对定位的容器的大小？

css - 如何在 Bulma 中从 Sass 生成 CSS

javascript - 使用 jQuery 和 php 执行两个任务

jquery - SVG 路径悬停填充背景。领土计划非常先进

php - 从 MySQL 动态生成 HTML 表

javascript - 如何从上一个视频结束的确切时间开始播放视频？

©2024 IT工具网  联系我们