text-align (start, end, left, right, center, justify) positions inline content inside its block, not the block itself. Prefer start and end, which flip in right-to-left languages. text-align-last aligns a paragraph's final line separately, and text-justify chooses whether justification stretches word or letter gaps (not in Safari 10 ). vertical-align (baseline, middle, top, sub, super, a length) applies only to inline boxes and table cells, not to a div.
<style>
body { font: 15px/1.5 Georgia, serif; margin: 10px; }
.j { text-align: justify; text-align-last: center; width: 330px; float: left; margin: 0 20px 0 0 }
i { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: #1565c0;
vertical-align: middle; } sup { vertical-align: super; font-size: .7em; }
td { height: 60px; border: 1px solid #90a4ae; vertical-align: bottom; }
</style>
<p class="j">Justified lines stretch the spaces between words until both edges line up, while
text-align-last centers the short final line of the paragraph.</p>
<p><i></i> Middle, E = mc<sup>2</sup></p><table><tr><td>Cell content at the bottom</td></tr></table>