Question 167481 in Html Question posted in
Some basic documentation can be found here.

Html – How, using CSS, correctly place container centered at the bottom of the page

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:

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

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    This could be done like this, no transform needed.

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

    Also: Think about putting your CSS into a .css file, inline css isn’t really a good way 😉

    Login or Signup to reply.
  3. 0

    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.

    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="logo.png" /><br/> Publisher's
    <br/> Name
    <br/> 2018
  </p>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search