CODEWITHSUNDEEP
csshtmlalignment
Anon gold
Anon gold

Reputation: 31

Vertically align <p> element

I need to align the p element to the bottom center of the page but something is wrong. I am making an HTML5 page.

Here is the CSS selector:

p { vertical-align:80px; }

Upvotes: 2

Views: 2067

Answers (2)

vladkras
vladkras

Reputation: 17228

If you need exactly "align the p element to the bottom center of the page"

p {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

demo

but it's not the best solution for most websites. Suppose, you are trying to make footer with some copyright (or year, or your name). In this case you have to use more complicated html and css, that includes main div, footer div, etc.

Upvotes: 2

Airen
Airen

Reputation: 2169

Please try this:

CSS

html,body{
  marign: 0;
  padding: 0;
  height: 100%;
}
body:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
}
p{
  display: inline-block;
  vertical-align: bottom;
}

Please view the demo. You will change the vertical-align for p, lay hime at top or middle.

Upvotes: 1

Related Questions