如何使用 CSS 垂直对齐文本？

Question

<div style='height:200px;'>
SOME TEXT
</div>

how do i align "SOME TEXT" at the bottom of the div using CSS without padding?

Answer 1

The absolute easiest way, though not-exactly using your code example, would be:

div {height: 400px;
    width: 50%;
    margin: 0 auto;
    background-color: #ffa;
    position: relative;
    }

div p   {position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    }

html

<div id="container">
<p>SOME TEXT</p>
</div>

Wrap your text in an element, anything from <p> , <span> , <div> ...whatever, and position that element at the bottom of its container.

Answer 2

You can't do it in a simple way, at least not cross browser.
You can use the display: table; vertical-align: center;
You can use JS/ CSS expressions.
You can have another element inside the div, and position it absolute in relation to the div:

<div style='position:relative;'>
    <div style='position: absolute; bottom:0;>
            My Text
    </div>
</div>

But really, as much as I hate to say, Tables is the KISS here ( if you need to veritcaly center it).

Answer 3

TDs can vertically align text with vertical-align, but this does not work on DIVs. It is not considered good style to use tables to vertically align elements.

You cannot vertical-align text within DIVs with CSS. You can only use padding, margin, or absolute and fixed positioning to align an text vertically.

If you use absolute positioning well, you can vertically align the text by vertically aligning a container that the text is in. However, absolutely positioned elements do not take up "space" within their container, which means you have to set a margin or padding to offset that space in the container.

Eg:

HTML:

<div id="container">
  <span id="text">Some text, Some text, Some text, </span>
</div>

CSS:

#id {
  position:relative;
  margin-bottom: 100px;
}

#text {
  position:absolute;
  bottom:0;
  height: 100px;
  overflow:hidden;
}

Answer 4

# id{
    display:table-cell; 
    vertical-align:bottom;
    }

Answer 5

Using flex, supported in most recent browsers

 div { align-items: center; background: red; display: flex; /* Uncomment to align it horizontally */ /* justify-content: center; */ }

 <div style='height:200px;'> SOME TEXT </div>