在这种情况下如何制作页脚以及如何使图像居中？
Posted
技术标签:
【中文标题】在这种情况下如何制作页脚以及如何使图像居中？【英文标题】：How can I make footer in this case and how to center image? 【发布时间】：2020-12-25 23:02:18 【问题描述】：在这种情况下如何制作页脚？当我尝试这样做时，页脚文本与页面顶部重叠。我想把这个页脚放在页面的底部。
第二个问题。我如何才能将这个标题的高度和宽度居中，因为现在只是宽度居中。
我的最后一个问题是这个页面布局正确吗？不就是外表吗？
html width:100%; height:100%; margin:0; padding:0;
body width:100%; height:100%; margin:0; padding:0;
body
font-family: Garamond;
header
background-color: #3CB371;
width: auto;
height: 150px;
color: white;
font-size: 130%;
text-align: center;
padding: 10px;
section
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
.left
background-color: #FAEBD7;
position: absolute;
left: 0px;
width: 55%;
height: 450px;
.right
background-color: #FAEBD7;
position: absolute;
right: 0px;
width: 45%;
height: 450px;
img
padding: 3px;
margin: 15px;
border: dotted;
border-radius: 2px;
border-color: #3CB371;
footer
background-color: red;
position: absolute;
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>Some H2<h2>
</header>
<section>
<article>
<div class="right">
<h3>Some H3</h3>
<ol>
<li value="5">Some5 LI</li>
<li value="9">Some9 LI</li>
<li value="20">Some20 LI</li>
<ol>
<a href="url1" target="_blank" rel="noopener">
<li>Some href1 text</li>
<a href="url" target="_blank" rel="noopener">
<li>Some href2 text</li>
</ol>
</ol>
</div>
<div class="left">
<img src="imgurl" class="center">
</div>
</article>
</section>
<footer>
Some footer text
</footer>
</body>
</html>感谢您的帮助！
【问题讨论】：
【参考方案1】：首先，您必须关闭 <a> 和 <h2> 等标签。你在结束标签上犯了一些错误。
其次，你必须给你的页脚提供bottom:0;，如果你不这样做，你的页脚会因为position:absolute;而被放置在一个奇怪的地方。
最后，您可以使用float:right; 而不是在您的.right div 中提供position:absolute; right:0;。
【讨论】：
当我将 position:absolute 和 right:0 更改为 float:right 时，我的所有页面都会向上并剪切一些文本等。 bottom:0 在页脚中工作，但如何防止它与部分标签重叠? @grtyz 你已经使用了 position:absolute;让你的部分居中，对吗？因此，这不是居中的最佳方式。我稍微编辑了你的代码，但我忘了告诉你你必须改变你的居中风格。只需删除您部分的 CSS 内容并添加display:table; margin:0 auto。【参考方案2】：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
*
padding:0;
margin:0;
box-sizing:border-box;
body
min-height:600px;
width:100%;
font-family: Garamond;
background-color: #3CB371;
header
width: 100%;
height: 150px;
color: white;
font-size: 130%;
text-align: center;
padding: 10px;
border-bottom:1px solid black;
line-height:150px
section
min-height:450px;
.left
width: 55%;
height: 450px;
float:left;
.right
border-right:1px solid;
width: 45%;
height: 450px;
float:left;
img
padding: 3px;
margin: 15px;
border: dotted;
border-radius: 2px;
border-color: #3CB371;
footer
footer:100px;
height:100px;
border:1px solid black
ol
text-align:center
</style>
</head>
<body>
<header>
<h2>Some H2</h2>
</header>
<section>
<article>
<div class="right">
<h3>Some H3</h3>
<ol>
<li value="5">Some5 LI</li>
<li value="9">Some9 LI</li>
<li value="20">Some20 LI</li>
<ol>
<li><a href="url" target="_blank" rel="noopener">Some href1 text</a></li>
<li><a href="url" target="_blank" rel="noopener">
Some href2 text</a></li>
</ol>
</ol>
</div>
<div class="left">
<img src="imgurl" class="center">
</div>
<div style="clear:both"></div>
</article>
</section>
<footer>
Some footer text
</footer>
</body>
</html>
我对您的代码进行了一些更改并添加了边框，以便您轻松理解
【讨论】：
在你的 style.css 文件中添加这个 css 并检查它。以上是关于在这种情况下如何制作页脚以及如何使图像居中？的主要内容，如果未能解决你的问题，请参考以下文章