標誌不會向左或向右移動內部頭標記

我試圖把我在中央圖標或我的頁面（上面的菜單導航頭&中心）它從菜單移開，但不橫向移動離開或者無論如何，都只是保持在同一個位置。標誌不會向左或向右移動內部頭標記

我已經竭盡所能搜索谷歌也沒有。結果表明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>

來源

2016-11-27 k.rob

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

來源

2016-11-27 19:10:04 Chiller

我不知道你在說什麼我添加了文本將中心對齊到標題，它什麼都不做。 –

我編輯了我的答案文本對齊工作正常，但您需要更改一些您的代碼 – Chiller

工作表示感謝。 –

使頭部位置相對的，寬度100％

使您的徽標位置相對，給它一個比您的標題更小的寬度，並使其顯示塊，邊距：0自動，相對位置

來源

2016-11-27 19:11:33 violetthesun

根本沒動。 –

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

來源

2016-11-27 19:37:31

只需使用文本對齊：中心;在你的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; 
}

來源

2016-11-27 19:42:54

標誌不會向左或向右移動內部頭標記

回答

相關問題