英文:
How, using CSS, correctly place container centered at the bottom of the page
问题
以下是翻译好的部分：
我的目标是将文本（在下面的示例中 - "Publisher's Name"）放置在页面底部，同时使其居中对齐。
问题是，由于某种原因，包含此文本的块被移动到了<body>的边界之外。因此，当我尝试设置整个页面（<body>）的margin时，它被计算不正确，即不包括此底部文本。
问题：应该使用哪个正确的CSS代码来实现我的目标？
我目前正在尝试的代码：
<body style="text-align: center; border: 5px solid black; margin: 50px;">
<h1 style="text-transform: uppercase; font-size: 300%;">Book<br/> Title</h1>
<p style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
<img alt="Logo" src="https://via.placeholder.com/150" style="height: 2.5em; width: auto;" />
<br/> Publisher's
<br/> Name
<br/> 2018
</p>
</body>
如果您需要更多帮助，请告诉我。
英文:
My goal is to place the text (in the example below - "Publisher's Name") at the bottom of the page, while aligning it at the center.
Problem is, for some reason, the block with this text is being moved outside of the boundaries of the <body>. Therefore, when I try to set the margin for the whole page (<body>), it is calculated incorrectly, i.e. not includes this bottom text.
Question: what should be the correct CSS code that achieves my goal?
Code I'm currently trying:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<body style="text-align: center; border: 5px solid black; margin: 50px;">
<h1 style="text-transform: uppercase; font-size: 300%;">Book<br/> Title</h1>
<p style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
<img alt="Logo" src="https://via.placeholder.com/150" style="height: 2.5em; width: auto;" />
<br/> Publisher's
<br/> Name
<br/> 2018
</p>
</body>
<!-- end snippet -->
答案1
得分: 1
以下是已翻译好的内容：
这可以这样做，不需要转换。
<!-- 开始片段：js 隐藏：false 控制台：true 无宝贝：false -->
<!-- 语言：lang-css -->
.footer {
position: fixed;
display: grid;
place-items: center;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.footer p {
text-align: left;
}
<!-- 语言：lang-html -->
<div class="footer">
<p>您的文本，左对齐<br>和居中</p>
<div>
<!-- 结束片段 -->
另外，考虑将您的CSS放入.css文件中，内联CSS并不是一个好的方式 
英文:
This could be done like this, no transform needed.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.footer {
position: fixed;
display: grid;
place-items: center;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.footer p {
text-align: left;
}
<!-- language: lang-html -->
<div class="footer">
<p>Your text, left aligned<br> and centered</p>
<div>
<!-- end snippet -->
Also: Think about putting your CSS into a .css file, inline css isn't really a good way
答案2
得分: 0
试试这个：
<style>
body {
position: relative;
text-align: center;
border: 5px solid black;
margin: 50px;
padding-bottom: 3em;
}
h1 {
text-transform: uppercase;
font-size: 300%;
}
p {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
margin: 0;
padding: 0;
line-height: 1.5;
}
p img {
height: 2.5em;
width: auto;
}
</style>
英文:
try this:
<style>
body {
position: relative;
text-align: center;
border: 5px solid black;
margin: 50px;
padding-bottom: 3em;
}
h1 {
text-transform: uppercase;
font-size: 300%;
}
p {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
margin: 0;
padding: 0;
line-height: 1.5;
}
p img {
height: 2.5em;
width: auto;
}
</style>
答案3
得分: 0
不是相对于页面，而是相对于body元素定位更好吗？这里也不需要使用转换。
英文:
Isn't it better to position not relative to the page, but relative to the body element?
You also don't need to use transformation when it's not needed here.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<body style="text-align: center; border: 5px solid black; margin: 50px;position:relative;padding-bottom:100px">
<h1 style="text-transform: uppercase; font-size: 300%;">Book<br/> Title</h1>
<p style="position: absolute; bottom: 0; left: 0; right:0; margin:auto; padding: 15px;">
<img alt="Logo" src="https://via.placeholder.com/150" style="height: 2.5em; width: auto;" />
<br/> Publisher's
<br/> Name
<br/> 2018
</p>
</body>
<!-- end snippet -->
答案4
得分: -1
以下是您要翻译的内容：
正如您观察到的那样：margin 是 2x 50px，而 border 是 2x 5px，它们加在一起总共是 110px。因此，我使用了 calc() CSS 函数来实现居中对齐，以防止向右滑动，因为 margin 从左侧开始。这是因为 body 上的 margin 会使内容与浏览器视口偏移。
body {
text-align: center;
border: 5px solid black;
margin: 50px;
height: calc(100% - 110px);
width: calc(100% - 110px);
position: absolute;
}
h1 {
text-transform: uppercase;
font-size: 300%;
}
p {
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
img {
height: 2.5em;
width: auto;
}
<body>
<h1>Book<br/> Title</h1>
<p><img alt="Logo" src="https://via.placeholder.com/150" /><br/> Publisher's<br/> Name<br/> 2018</p>
</body>
请注意，我已经删除了注释部分，只提供了代码和文本的翻译。
英文:
As you well observed: the margin is 2x50px, and with the border2x 5px they together add up 110px. So, I used the calc() CSS function for the centering not to slip to the right, since the margin starts from the left. This is because the margin on the body offsets the content from the browser's viewport.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
text-align: center;
border: 5px solid black;
margin: 50px;
height: calc(100% - 110px);
width: calc(100% - 110px);
position: absolute;
/*min-height: 300px; or more, to make is enjoyable on smaller screens*/
}
h1 {
text-transform: uppercase;
font-size: 300%;
}
p {
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
img {
height: 2.5em;
width: auto;
}
<!-- language: lang-html -->
<body>
<h1>Book<br/> Title
</h1>
<p><img alt="Logo" src="https://via.placeholder.com/150" /><br/> Publisher's
<br/> Name
<br/> 2018
</p>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论