Question

我试图将我的徽标放在中间或我的页面（标题中心和菜单导航栏上方）它离开菜单但是不能左右移动只是停留在无论如何都是相同的位置。

我已经尝试了所有搜索谷歌的内容，但没有结果显示出来。结果制作标题相对并尝试制作相对菜单。这是我的代码。

body {
width: 800px;
margin: 100px auto 0 auto;
background: darkgrey;
font-family: arial;
display: block;
}

#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}

#h1.logo {
position: absolute;
right: 50px;
}

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 520px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right:5px;
  0% { /* space between content and footer*/
    position: absolute;
    top: 20;
    right: 50px;
  }

}
footer {
  display: inline-block;
        width:800px;
        text-align: left;
        margin-top: 250px;

}

footer ul {list-style-type: none;
text-align: center;
float: left;
}

footer li {display:inline;
}

footer a:link{
  text-decoration: none;
}

footer p {
 float:right;
}

table {border: solid darkgrey thin;
position: relative; 
left: -100px;
z-index: 2;

<body>

<header>
<h1 class="logo">
<img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
<li><a href="index.html" title="tab1">Home</a></li>
<li><a href="about.html" title="tab2">About</a></li>
<li><a href="portfolio.html" title="tab3">Portfolio</a></li>
<li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer> <!--footer starts here-->

  <div id="tab3">

 <table border="0" width=1024px height=0px>
  <tr>
    <td><a href="index.html"><img src="images/logoicon.png"/></a></td>
    <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
    <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
  </tr>
</table>

  </div>    


</footer> <!--end of footer-->

</body>

Answer 1

您可以通过将text-align:center;添加到图片的父级（带有类徽标的h1）来解决此问题。

我注意到你的页面右侧有一个很大的瞎扯

首先：你不应该在身上使用宽度来创建容器并给它一个固定的宽度

秒：你不应该在你的所有页面中使用位置来搞乱它，你应该只在需要时使用它

<header>
<h1 class="logo">
<img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
<li><a href="index.html" title="tab1">Home</a></li>
<li><a href="about.html" title="tab2">About</a></li>
<li><a href="portfolio.html" title="tab3">Portfolio</a></li>
<li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer> <!--footer starts here-->

  <div id="tab3">
  <!-- change width to 100% and remove height-->
 <table border="0" width="100%">
  <tr>
    <td><a href="index.html"><img src="images/logoicon.png"/></a></td>
    <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
    <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
  </tr>
</table>

  </div>    


</footer> <!--end of footer-->

CSS：

body {
/*width: 800px;*/ /*deleted*/
/*margin: 100px auto 0 auto;*//*deleted*/
background: darkgrey;
font-family: arial;
display: block;
}

#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}
/*
#h1.logo {
position: absolute;
right: 50px;
}*//*deleted*/

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 520px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right:5px;
  0% { /* space between content and footer*/
    position: absolute;
    top: 20;
    right: 50px;
  }

}
footer {
  display: inline-block;
        width:800px;
        text-align: left;
       /* margin-top: 250px;*//*deleted*/

}

footer ul {list-style-type: none;
text-align: center;
float: left;
}

footer li {display:inline;
}

footer a:link{
  text-decoration: none;
}

footer p {
 float:right;
}

table {border: solid darkgrey thin;
position: relative; 
/*left: -100px;*//*deleted*/
z-index: 2;}


/*added*/
.logo{

  text-align: center;
}

This how it should look like

Answer 2

使标题位置相对，宽度为100％

使您的徽标位置相对，给它一个小于标题的宽度，并使其显示块，边距：0自动，位置相对

Answer 3

你不是正确的。我们使用＃作为ID，它只是一个元素的唯一标识符，我们使用。上课。所以你需要在header和h1标签之前删除＃。你也不能正确关闭css表LiveOnFiddle

header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}

h1.logo {
position: absolute;
right: 50px;
}

＆＃13;

   body {

  margin: 0 ;
  background: darkgrey;
  font-family: arial;
}

header {
  width: 100%;
  height: 50px;

  background: transparent;
}

h1.logo {
text-align:center;
}
.img-responsive{
  display:block;
  margin:0 auto;
  width:100%;
  height:auto;
}
#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content {
  background: #fff;
  padding: 2em;
  height: 520px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}


footer {
  display: inline-block;

  text-align: left;

}

footer ul {
  list-style-type: none;
  text-align: center;
  float: left;
}

footer li {
  display: inline;
}

footer a:link {
  text-decoration: none;
}

footer p {
  float: right;
}

table {
  border: solid darkgrey thin;
  position: relative;

  z-index: 2;
}

＆＃13;

<header>
  <h1 class="logo">

<img class="img-responsive" src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
  <li><a href="index.html" title="tab1">Home</a></li>
  <li><a href="about.html" title="tab2">About</a></li>
  <li><a href="portfolio.html" title="tab3">Portfolio</a></li>
  <li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer>
  <!--footer starts here-->

  <div id="tab3">

    <table border="0" width:100height=0px>
      <tr>
        <td>
          <a href="index.html"><img src="images/logoicon.png" /></a>
        </td>
        <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
        <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
      </tr>
    </table>

  </div>


</footer>
<!--end of footer-->

＆＃13;

Answer 4

只需使用text-align：center;在你的h1上，这样它里面的所有东西都会居中。

你的CSS也有一些错误，例如你有

#h1.logo {
  position: absolute;
  right: 50px;
}

但在你的HTML中你有<h1 class="logo">，所以如果你想在h1中定位img你应该使用：

.logo img {
  position: absolute;
  right: 50px;
}

您在CSS中定位的内容是ID为＆＃34; h1＆＃34;和一个班级名称＆＃34; logo＆＃34;。

无论如何这是解决方案：

HTML：

<body>
    <header>
        <h1 class="logo">
            <img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
        </h1>
    </header>

    <!--navigation starts here-->

    <!--An unordered list that holds the tab navigation items-->
    <ul id="tabs">
        <li><a href="index.html" title="tab1">Home</a></li>
        <li><a href="about.html" title="tab2">About</a></li>
        <li><a href="portfolio.html" title="tab3">Portfolio</a></li>
        <li><a href="blog.html" title="tab4">Blog</a></li>
    </ul>

    <!--A wrapper for each tab content-->

    <div id="content">
    </div>
    <!--end  content div-->

    <!--footer starts here-->
    <footer>
        <div id="tab3">

        <table border="0" width=1024px height=0px>
            <tr>
                <td>
                    <a href="index.html"><img src="images/logoicon.png" /></a>
                </td>
                <td>
                    <a href="index.html">Home | </a>
                    <a href="about.html">About | </a>
                    <a href="portfolio.html">Portfolio | </a>
                    <a href="blog.html">Blog</a>
                </td>
                <td align="right">
                    <small>&copy;copyright 2016 Kieron Roberts</small>
                </td>
            </tr>
        </table>

        </div>
    </footer>
    <!--end of footer-->

</body>

和CSS：

body {
  width: 800px;
  margin: 100px auto 0 auto;
  background: darkgrey;
  font-family: arial;
}

#header {
  width: 800;
  height: auto;
  margin: 0;
  background: transparent;
}

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content {
  background: #fff;
  padding: 2em;
  height: 520px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

.logo{
  text-align: center;
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right: 5px;
  position: absolute;
  top: 20;
  right: 50px;
}

footer {
  display: inline-block;
  width: 800px;
  text-align: left;
  margin-top: 250px;
}

footer ul {
  list-style-type: none;
  text-align: center;
  float: left;
}

footer li {
  display: inline;
}

footer a:link {
  text-decoration: none;
}

footer p {
  float: right;
}

table {
  border: solid darkgrey thin;
  position: relative;
  z-index: 2;
}

徽标不会在标题标记内向左或向右移动

4 个答案: