Fatal编程技术网
  • html/
  • Html 将文本与样式化元素内的左下角对齐

Html 将文本与样式化元素内的左下角对齐

html css

Html 将文本与样式化元素内的左下角对齐,html,css,text-alignment,Html,Css,Text Alignment,如何使此样式化元素中的文本与左下角对齐？ 我只希望框内的文本位于框的左下角。文本的其余部分应不受影响 我是CSS的新手，无法理解它 HTML <body> <h1>example text</h1> <article class="box" style="background-color: #2672EC">foo bar</article> <h1>example text</h1> &

如何使此样式化元素中的文本与左下角对齐？ 我只希望框内的文本位于框的左下角。文本的其余部分应不受影响

我是CSS的新手，无法理解它

HTML

<body>
    <h1>example text</h1>
    <article class="box" style="background-color: #2672EC">foo bar</article>
    <h1>example text</h1>
</body>
这是JSFIDLE

有两种方法，一种是使用CSS定位技术，需要将父元素设置为
位置：相对
和子元素到
位置：绝对

（使用
span
元素包装文本）



或使用
显示：表格单元格与
垂直对齐：底部

（标记中没有更改）

另外，我想重构一下你的CSS，下面的代码片段


margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;



可以写为
边距：5.5px 5.5px 5.5px 5.5px
尝试将目标文本包装在范围内：


<article class="box" style="background-color: #2672EC"><span class="bottom">foo bar</span>



感谢这两种解决方案！请注意，不幸的是，如果父级将display设置为flex，则第二个选项不起作用

.box {
    height: 187px;
    width: 187px;
    margin-right: 5.5px;
    margin-left: 5.5px;
    margin-bottom: 5.5px;
    margin-top: 5.5px;
    color: white;
    display: table-cell;
    vertical-align: bottom;
}



margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;



<article class="box" style="background-color: #2672EC"><span class="bottom">foo bar</span>



.box {
    position: relative;
}
.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}