标志不会向左或向右移动内部头标记

问题描述：

我试图把我在*图标或我的页面（上面的菜单导航头&中心）它从菜单移开，但不横向移动离开或者无论如何，都只是保持在同一个位置。标志不会向左或向右移动内部头标记

我已经竭尽所能搜索谷歌也没有。结果表明up.Tried使头部相对的，试图使相关菜单。这是我的代码。

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>

1问题，但，当我开始采取宽出体外标记它的拉伸页面上的所有内容我都希望内容的div和内容以及菜单位于内容的左侧和右侧，而不是跨越整个页面的宽度。我认为这很混乱，因为我有4页，而另外3页我没有更新，所以CSS看起来很乱，因为它引用了2个不同的html页面。 –

答

您可以通过添加text-align:center;到图像的父（H1一类的标志）

我注意到，你在你的页面右侧大瞎扯解决此

第一：你不应该在正文中使用的宽度，你必须创建一个容器，并给它一个固定的宽度

第二：你不应该使用POS银行足球比赛中所有的网页，将搞砸了，你应该只需要

<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

我不知道你在说什么我添加了文本将中心对齐到标题，它什么都不做。 –

我编辑了我的答案文本对齐工作正常，但您需要更改一些您的代码 – Chiller

工作表示感谢。 –

答

使头部位置相对的，宽度100％

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

根本没动。 –

答

你的CSS不正确。我们使用＃作为唯一标识符，仅用于一个元素，我们使用。上课。所以你需要在标题和h1标签前删除＃号。你也不要关闭表CSS正确LiveOnFiddle

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

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

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

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

答

只需使用文本对齐：中心;在你的h1上，这样它里面的所有东西都会居中。

而且你的CSS有一定的误差修改，例如，你有

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

但你的HTML里面你有<h1 class="logo">，所以如果你要定位的H1内的IMG你应该使用：

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

你在CSS中的目标是一个id为“h1”，类名为“logo”的元素。

反正这是解决方案：

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

标志不会向左或向右移动内部头标记

相关推荐