欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使用CSS正確地將容器放置在頁面底部的中央

CSS
劉姿婷2年前7瀏覽0評論

我的目標是將文本(在下面的例子中-& quot；出版商名稱& quot)在頁面的底部，同時在中心對齊。

問題是，由于某種原因，包含該文本的塊被移到了& ltbody & gt。因此，當我試圖為整個頁面設置邊距時(& ltbody & gt)，計算不正確，即不包括底部文本。

問題:實現我的目標的正確的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>

可以這樣做，不需要轉換。

.footer {
  position: fixed;
  display: grid;
  place-items: center;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.footer p {
  text-align: left;
}

<div class="footer">
  <p>Your text, left aligned<br> and centered</p>
<div>

試試這個:

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

不是相對于頁面定位，而是相對于body元素定位更好嗎？ 當這里不需要的時候，你也不需要使用轉換。

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

正如你所觀察到的:邊距是2x50px，加上邊框2x 5px，它們加起來是110px。因此，我使用calc() 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;
}

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