在div中垂直对齐左右文本

Question

I am trying to create a headline and align one text to the left and another to the right and I would like to know if there is another way apart from line-height to achieve that? 我正在尝试创建一个标题，并在左侧对齐一个文本，在右侧对齐另一个文本，我想知道是否有除line-height以外的其他方法来实现这一点？

 .popular { margin-left: 15px; float: left; } .popular-day { margin-right: 15px; float: right } .menu-headline { height: 100px; outline: 1px solid black; width: 500px; text-align: middle; }

 <div class='menu-headline'> <p class='popular'>Popular</p> <p class='popular-day'>Today</p> </div>

Answer 1

It can be done easily with flexbox . 使用flexbox可以很容易地做到这flexbox 。

 .menu-headline { outline: 1px solid black; width: 500px; height: 100px; padding: 0 15px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; }

 <div class='menu-headline'> <p class='popular'>Popular</p> <p class='popular-day'>Today</p> </div>

Or using CSS table to support older IE. 或使用CSS表来支持较旧的IE。

 .menu-headline { outline: 1px solid black; width: 500px; height: 100px; display: table; } .menu-headline > p { display: table-cell; vertical-align: middle; padding: 0 15px; } .popular-day { text-align: right; }

 <div class='menu-headline'> <p class='popular'>Popular</p> <p class='popular-day'>Today</p> </div>

在div中垂直对齐左右文本

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-01-23 17:45:47

在div中垂直对齐左右文本

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-01-23 17:45:47

解决方案1
2 已采纳 2016-01-23 17:45:47