it-swarm.com.ru

Выровнять текст по нижней части div

Я пытался выровнять свой текст по нижней части div из других постов и ответов в stackoverflow, я научился обрабатывать это с различными свойствами CSS. Но я не могу сделать это. В основном мой код html выглядит так:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
   <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

Эффект в том, что в FF я просто получаю вертикальную линию (div свернутым способом), а рядом с ним пишется текст. Как можно предотвратить свертывание div, но ширину, подходящую к тексту?

48
parascus

Flex Solution

Это прекрасно, если вы хотите пойти с display: table-cell решение. Но вместо того, чтобы взломать его, у нас есть лучший способ сделать то же самое, используя display: flex;. flex - это то, что имеет достойная поддержка .

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}
<div class="wrap">
  <span>Align me to the bottom</span>
</div>

В приведенном выше примере мы сначала устанавливаем родительский элемент в display: flex; и ​​позже мы используем align-self к flex-end. Это поможет вам поместить элемент в конец родительского элемента flex.


Старое решение (действительно, если вы не хотите использовать flex)

Если вы хотите выровнять текст снизу, вам не нужно писать столько свойств для этого, используя display: table-cell; с vertical-align: bottom; достаточно

div {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid #f00;
  height: 100px;
  width: 100px;
}
<div>Hello</div>

(или JSFiddle)

92
Mr. Alien

Теперь вы можете сделать это с помощью Flexbox justify-content: flex-end в настоящее время:

div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 150px;
  height: 150px;
  border: solid 1px red;
}
  
<div>
  Something to align
</div>

Проконсультируйтесь со своим Caniuse , чтобы узнать, подходит ли Flexbox для вас.

37
Zequez