Html 文本对齐不起作用且足球div不出现？_Html_Css

Html 文本对齐不起作用且足球div不出现？

html css

Html 文本对齐不起作用且足球div不出现？,html,css,Html,Css,我正在尝试修复滚动条上的顶部和底部div条，文本居中顶部栏已修复，但文本对齐不起作用底部栏根本没有出现我看不出css有什么问题，我在chrome的开发控制台中没有发现错误谢谢 <!DOCTYPE html> <html> <head> <title> My test </title> <meta charset="UTF-8"> </head> <style> div{ margin-

我正在尝试修复滚动条上的顶部和底部div条，文本居中

顶部栏已修复，但文本对齐不起作用底部栏根本没有出现

我看不出css有什么问题，我在chrome的开发控制台中没有发现错误

谢谢

 <!DOCTYPE html>
<html>
<head>
<title>
My test
</title>
<meta charset="UTF-8">  
</head>
<style>

div{ margin-left: 20%;
padding-left: 20%
}

#headbar 
{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar 
{display:block;text-align:center;position:fixed;width:100%;
}
#width: 80%


p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};


<body>


</style>


<div id="headbar" style="background-color: #ffccff";> 

    <a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>  
    <a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a> 

</div>

<?php


for ($n=0; $n<101; $n++) {
    $modulo = ($n%3);

    if($modulo==0){
        $bg_color = '#e0ffff';
    }elseif($modulo==1){
        $bg_color = '#f5f5db';
    }elseif($modulo==2){
        $bg_color = '#ffe4e1';
    }

    echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}






?>

<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />

<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" /> 
</div>



</form>
</body>
</html>


我的测试
左边缘：20%；
左：20%
}
#井架
{显示：内联；文本对齐：中心；位置：固定；宽度：100%；
}
#足球运动员
{显示：块；文本对齐：中心；位置：固定；宽度：100%；
}
#宽度：80%
p:n子（3n）{宽度：80px；背景：#e0ffff}；
p:n子（3n+1）{背景：#f5db}；
p:n子（3n+2）{背景：#ffe4e1}；

像这样的东西

#头杆
{
显示：内联块；
文本对齐：居中；
位置：固定；
宽度：100%；
}
#足球运动员
{
显示：块；
文本对齐：居中；
位置：固定；
宽度：100%；
底部：0；
}
p:n子（3n）{宽度：80px；背景：#e0ffff}；
p:n子（3n+1）{背景：#f5db}；
p:n子（3n+2）{背景：#ffe4e1}


我的测试
身体{
保证金：0；
填充：0；
}
.垫片{
高度：1米；
宽度：100%；
}
#标题栏{显示：内嵌；文本对齐：居中；位置：固定；宽度：100%；
}
#足球运动员
{显示：块；文本对齐：中心；位置：固定；宽度：100%；底部：0；
}
#宽度：80%
p:n子（3n）{宽度：80px；背景：#e0ffff}；
p:n子（3n+1）{背景：#f5db}；
p:n子（3n+2）{背景：#ffe4e1}；

我试图纠正一些问题。由于
填充和边距，文本对齐不起作用。希望这有帮助
这是一个屏幕截图，在我的屏幕上看起来是这样的
为什么你的收尾
标签也会包裹你的收尾标签呢？谢谢，我只是厌倦了这个，两个栏都出现了，但两个文本都出现在屏幕的右侧，两个栏都有一个左边距我也看到了，这就是为什么我去掉了填充和边距。你还想留着吗？啊，我现在明白了，我需要段落有左右的页边，但没有其他
<title>
My test
</title>
<meta charset="UTF-8">  
</head>
<style>

body{
    margin:0;
    padding:0;
}
.spacer{
    height:1em;
    width:100%;
}
#headbar{display:inline;text-align:center;position:fixed;width:100%;
}

#footbar 
{display:block;text-align:center;position:fixed;width:100%;bottom:0;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};


</style>
<body>

<div id="headbar" style="background-color: #ffccff";> 

    <a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>  
    <a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a> 

</div>

<?php


for ($n=0; $n<101; $n++) {
    $modulo = ($n%3);

    if($modulo==0){
        $bg_color = '#e0ffff';
    }elseif($modulo==1){
        $bg_color = '#f5f5db';
    }elseif($modulo==2){
        $bg_color = '#ffe4e1';
    }

    echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}






?>
<div class="spacer"></div>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />

<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" /> 
</div>



</form>
</body>
</html>