如何将div的内容与底部对齐？
要将div的内容与底部对齐，可以使用CSS的Flexbox布局。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head><style>
.container {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100vh;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div>
这是一个div内容
</div>
</div>
</body>
</html>在这个示例中，我们使用了一个名为.container的类来定义一个flex容器。通过将display属性设置为flex，我们可以使用Flexbox布局。flex-direction: column将子元素排列为列，而justify-content: flex-end将子元素与底部对齐。height: 100vh将容器的高度设置为视口高度的100%，以便更好地展示对齐效果。
这个方法适用于将div内容与底部对齐，无需使用其他云计算品牌商。
相关·内容
7回答
有人能解释一下如何将页脚div与页面底部对齐吗？从我看到的示例中，它们都展示了如何让div在底部保持可见，无论您将页面滚动到哪里。虽然我不想那样做。我想把它固定在页面的底部，这样它就不会移动。感谢您的帮助！
浏览 3提问于2010-08-20得票数 86
回答已采纳
2回答
我制作了一个带有div标签的网格，在其中放置不同类型的内容，比如图片、文本、标题、按钮等等。我尝试了至少3种不同的方法来构建网格，现在我终于找到了最好的方法。网格现在看起来很好，工作完美，但是我有一个问题，我不能对齐一个文本的底部。
现在我的问题是：
如何将调用到操作的文本对齐到div的底部，同时将其余的内容保持在顶部。我希望能够通过添加一些规则来做到这一点，而不是通过构建网格来采取完全不同的方法。
底部应该对齐的部分称为"Bekijk dit artikel“。
所有的建议都非常欢迎！
浏览 5提问于2014-07-24得票数 1
回答已采纳
任何人都可以解释如何将页脚div对齐到页面的底部。从我见过的例子中，他们都展示了如何让div始终显示在底部，无论您在哪里滚动页面。虽然我不想那样。我希望它固定在页面的底部，所以它不会移动。
浏览 392提问于2018-03-07
回答已采纳
我找不到如何使用flexbox将div元素垂直居中对齐，并将页脚元素与页面底部对齐。 HTML和CSS .section {
height: 100vh;
display: flex;
align-items: center;
}
.container {
width: 100%;
max-width: 1400px;
padding: 0 15px;
margin: 0 auto;
}
.section__header {
text-align: center;
}
.footer {
margin: auto;
浏览 27提问于2021-03-27得票数 1
我应该在不使用任何框架的情况下完成这个挑战，只使用HTML和CSS。我对如何将屏幕左侧的导航项目和内容与右侧对齐，以及内容底部的后续图像和图像div不应占据导航容器的方式感到震惊。 这就是输出在桌面上的外观 ?
浏览 48提问于2021-08-14得票数 0
1回答
我想有一些文本对齐到面板的底部-内容在一个。(我使用的是bootstrap 3.3.7)然而，使用
position: absolute;
bottom: 0;
将其与整个面板的底部对齐--位于页脚中。我希望它只与panel-content div的底部对齐。但我不明白它为什么要这么做。
下面是正在发生的事情的图像，然后是我的面板div和“save”样式的代码。我尝试将“save”对齐到panel-content div的底部，但它进入了页脚。
<div class="panel panel-default">
<div
浏览 13提问于2018-08-16得票数 0
回答已采纳
1回答
在不修改html的情况下，我如何使它的标签与图片中的顶部对齐：
<div class="col">
<label for="foo">Select:</label>
<select id="foo" name="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div
浏览 5提问于2014-05-26得票数 0
回答已采纳
2回答
将底部与引导带对齐
、、、
对齐底部似乎不工作在我的启动带4。
下面是我的密码。我希望文本与底部的行对齐。我不能使用边距/填充，因为有时，这个文本将是多行的。
我如何垂直对齐底部？
<div style="height:55px !important;">
<span class="align-bottom">
This text should align to bottom, closer to the line
</span>
</div>
<div class="border-top">
浏览 0提问于2019-02-08得票数 0
回答已采纳
3回答
如何将两个标签与底部对齐。如果一个标签有多行，则它旁边的标签将从顶部显示。我可以把它对齐到底部吗？
<div class="field">
<div class="label">labl 1:</div>
<div class="value">Some text</div>
<br />
<br />
</div>
<div class="field">
<div class="labe
浏览 0提问于2013-09-13得票数 4
回答已采纳
我有一个小问题，我正在努力解决。
我需要将一个元素对齐到百分比div的顶部，底部: 100%，但我不能让它在父div中对齐。
所以我需要的是bottom: 0%与div的底部对齐，bottom: 100%与顶部对齐。
有什么想法吗？
编辑：
我希望该样本中的灰色条与顶部对齐:使用'bottom‘100%
浏览 0提问于2012-06-03得票数 0
回答已采纳
想知道这种行为的原因。
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
空div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="hei
浏览 8提问于2014-07-21得票数 11
10回答
我试着用Flexbox。，这显示了很好的对齐选项，但我实际上想要一个自上而下的情况。
我想要一个div坚持到父div的底部使用挠性盒。使用flex-direction: column和align-content: Space-between，我可以做到这一点，但是中间的div将在中间对齐，我希望中间的div也被粘贴到顶部。
顶部
中间
-
-
-
底部
align-self: flex-end会让它向右浮动，而不是底部。
完整的柔性盒文档：
浏览 9提问于2014-07-11得票数 86
回答已采纳
如何将引导图标和图像与底部对齐？(我对图标使用的是font-awsome )。
JSBIN：
<div class="btn-group">
<a class="btn" href="#">
<i class="icon-plus"></i>
<span>Add</span>
</a>
<a class="btn" href="#">
浏览 0提问于2013-01-17得票数 6
回答已采纳
1回答
我有一个表视图，它的底部约束设置在工具栏的顶部，但是，有时，当按钮没有必要时，我会隐藏这个工具栏。
如何将我的tableview的底部约束设置为现在成为屏幕sans工具栏的底部？
我是否在故事板中设置了两个底部约束？我是否以编程方式交换这些？
浏览 0提问于2014-08-20得票数 1
回答已采纳
如何将红色div的底部与类test的底部与右侧div的底部对齐？
html
<div>
<div class="box">
<div>sad
<br/>sad
<br/>sad
<br/>
</div>
<div class="test">sad
<br/>sad
<br/&
浏览 0提问于2015-11-04得票数 1
2回答
我尝试使用vertical-align将图像与out div元素的底部对齐，但此vertical-align似乎不起作用，图像根本没有移动。
<div class="row">
<div class="col-md-1">
<img src="../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
</div>
<div class=col-md
浏览 6提问于2016-02-16得票数 2
回答已采纳
1回答
我有两个链接(一个文本和一个图像)，我试图拉-右，并有每个垂直对齐的底部。但现在，看起来是这样的：
(垂直对齐彼此的顶部)
相关HTML：
<div class="col-md-7">
<div class="thumbnail">
<div class="caption clearfix">
<h2>Heading</h2>
<p class="thin">Donut jelly
浏览 7提问于2015-02-06得票数 0
回答已采纳
我的css是：
.stage{
width:960px;
background-image:url('stage.png');
background-position:bottom;
background-repeat:repeat-x;
min-height:400px;
float:left;
text-align:center;
}
这放置了div底部的背景图像，内容是居中的。但我不知道如何将内容放在div的底部。
宽度是固定的，如果内容高于div，则应该扩展高度，但如果内容较短，则应该放在底部。
我已经看过几个例子
浏览 2提问于2009-12-21得票数 2
1回答
? 有两个并排的盒子(outerboxes)。我用flexbox使两个盒子的高度相等。在每个框中，文本应从顶部(即图像下方)对齐，按钮应显示在框的底部。如何将按钮与底部对齐？我尝试了多种方法来制作嵌套的flex box，但都不适合我。 css .rowDisplay {
display: flex;
}
.outerbox {
border: 1px solid black;
}
.buttonClass {
/* tried flex box here as well*/
} js <div className = rowDisplay>
<div
浏览 96提问于2021-08-25得票数 2
我试图使用柔性盒对齐两个div在他们的父母与一个完全中心和另一个底部中心。他们都是同一个家长。结果应该是这样：
------------------------
| |
| |
| |
| |
| ------ |
| | b1 | |
| | | |
| ------ |
|
浏览 1提问于2016-05-05得票数 2
2回答
如何将div与类heightSmall对齐到row的底部？我试着用vertical-align: bottom，但这没什么用。
.heightBig{height:100px;background-color:red;}
.heightSmall{height:50px;background-color:green;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class
浏览 4提问于2015-01-14得票数 0
回答已采纳
3回答
我试图将div定位为父div中的页脚。
<div>
...some content...
<div id='footer'>
<span style='float:left'>Left text</span>
<span style='float:right'>Right text</span>
</div>
</div>
现在，left和right元素都可以，但是footer div并不是与包含div的底部对齐，而是与其内容的底部对齐。
但是如果我尝
浏览 0提问于2012-05-18得票数 0
回答已采纳
3回答
我在左边有一张图片，我想把文字排列到图片的顶部。
下面的代码是 jsfiddle中的：
<div>
<img src... >
<span>hello hello hello hello hello hello...</span>
</div>
但它沿着图像底部对齐文本，如下所示：
如何将文本从顶部绕到图像周围？
浏览 6提问于2017-10-06得票数 0
回答已采纳
10回答
我正在尝试将子div标记与父div标记的底部或基线对齐。
我想要做的就是将子Div放在父Div的基线上，下面是它现在的样子：
HTML
<div id="parentDiv">
<div class="childDiv"></div>
</div>
CSS
#parentDiv
{
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
#parentDiv .childDiv
{
height:1
浏览 138提问于2010-01-07得票数 109
2回答
我写代码已经有一段时间了，但我想知道如何将我的登录按钮放置在屏幕的底部中心，并在其上显示图像？谢谢
代码：
<template>
<div class="container-fluid">
<img alt="Sportly logo" src="~@/assets/sportly.png">
<div class="row">
<div class="col-md-6">
浏览 0提问于2020-02-19得票数 0
嘿，有一种不用使用position:absolute就可以将div标记的内容对齐到底部的方法。互联网上几乎所有其他的解决方案都使用position:absolute和/或vertical-align:bottom，但是有什么方法不需要使用position:absolute就可以做到这一点吗?例如，我如何将图像中的猫对齐到这个中div的底部，谢谢！
我正在考虑的另一个解决方案是填充顶部的空空间，以便将图像向下推到底部，但我也不知道如何做到这一点。
如果可能的话，请不要建议使用div中的表格。
浏览 7提问于2014-06-27得票数 0
回答已采纳
2回答
如何将图像与div的底部对齐？我希望${addIcon}表示的图像位于其容器的底部，这是一个dt。我使用AngularJS和Typescript。
<td ng-repeat="slotContent in slotRow.Slots" class="${styles.calendarTableTD}">
<div ng-repeat="booking in slotContent.Bookings">
<span ng-show="booking.ap
浏览 0提问于2019-08-09得票数 0
1回答
我正在使用bootstrap的响应式网格：
<div class="row-fluid">
<div class="span5 offset1">
<div class="row-fluid">
<div class="span6">
<img class="img-polaroid" src="http://placehold.it/480x300">
浏览 0提问于2013-08-12得票数 1
因此，考虑到这两种情况：
<
这里是左侧div中的文本比右边div上的输入元素更长的一般情况。
我如何指定包装器的大小与正确的div元素长度相同，在相同的场景中，正确的div输入元素在包装器底部对齐，就像我在第一个jsfiddle示例中一样。
我也在挣扎的是另一个场景，在右边的div中只有四个文本中的一个，而左边的div只有一个按钮。
如何将包装器调整为一行，并使用与第一种场景相同的CSS样式内联显示元素？
<
请给我一些指点，因为我正因随机尝试而发疯
height: auto;
min-height: 50px;
以及我在网上找到的其他
浏览 1提问于2013-10-01得票数 0
回答已采纳
2回答
我希望所有的照片都是底部对齐的(以便更接近它的标题)。我还希望标题留在一行中。我尝试为IMG、A和DIV添加下边距、垂直对齐，但什么也没有发生。我哪里做错了？请帮帮我。
谢谢！
浏览 2提问于2011-11-08得票数 0
回答已采纳
2回答
我使用下面的代码来对齐底部的表格，但它不能工作
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="black">
<div class="footer">
<table border="1" bottom="0px">
<tr>
浏览 1提问于2012-07-12得票数 3
回答已采纳
我有这个密码
HTML
<div class="head">
<div class="menu">
</div>
<div class="search">
</div>
</div>
CSS
.head {
height:110px;
position:relative;
}
.menu {
float:left;
position:absolute;
bottom:0px;
}
浏览 11提问于2017-06-16得票数 2
回答已采纳
我的"header_main“定位是绝对的，高度为100%，基本上覆盖了整个屏幕。在header_main div n中，还有另一个div也是绝对的。我已经将“图标包装器”div设置为底部:0；但是它不想定位绝对底部。
<body id="top" class="no-js">
<header id="header_main">
<div class="icon-wrapper"></div>
</header>
</body>
我的CSS：
h
浏览 3提问于2015-05-03得票数 0
回答已采纳
垂直对齐:底部，表示底部的内联框与其行框的底部相匹配，因此在我的例子中，span2的内联框是绿色的，其行高为100 of，继承自其父框。它的线框是黑色的，也有线高:100 is。所以它们是底部对齐的。见图：
我已经了解到：
1.垂直对齐只适用于内联/内联块元素。
2.垂直对齐是基于直线高度，而不是其容器的高度！
3.在线框中，其线高是内嵌框的线高(在我看来，它的内嵌元素或内嵌块元素)具有最高的直线高度。就像图片：
在内联块元素上，一切都很好，但内联元素似乎存在问题。
解释：
父母:身高:200 parent，直线高度；100 parent；
Div.child:内嵌块，垂直
浏览 1提问于2017-04-09得票数 1
回答已采纳
我无法让text-bottom正常工作。从我的阅读来看，div应该与文本的底部对齐，但是它在底部对齐，就好像它是由" bottom“对齐的。
div {
display: inline-block;
vertical-align: text-bottom; //same as bottom
text-align: center;
text-decoration: underline;
}
div:first-child {
width: 100px;
height: 200px;
border: 3px solid black;
line-heig
浏览 6提问于2018-02-12得票数 1
2回答
我正在尝试设计一个无表的输入表单。当我学到了关于CSS的新东西时，我逐渐地走过来了。但是我不知道如何让较小的验证文本与字段标签文本的底部对齐。
<div style="width:275px">
<div style="width:175px">
<label style="float:left;">Label</label>
<span style="float:right; font-size:x-small; color:#FF0000;&
浏览 2提问于2013-02-23得票数 0
回答已采纳
2回答
我有这样的安排
...<td>
<div></div>
<div></div>
<div></div>
</td>
div标记用动态数据填充。我将div标签放在td单元格中，因为中间的div填充了一个图像，它可以是不同的高度。我要做的是让顶部的div与单元格的顶部对齐，让底部的div与底部对齐，让包含图像的中心div填充中间的整个空间并居中对齐。到目前为止，我所有的尝试都失败了，并且由于某些原因(是的，我已经看过了，没有竞争的样式)，我无法让div填充
浏览 4提问于2010-10-09得票数 0
2回答
我正在尝试将3项对齐/堆栈到display:flex div的底部。管理它的唯一方法是在顶部添加第4个div &使用javascript/jquery动态调整其高度，本质上是将这3项推到底部。
在不诉诸javascript/jquery的情况下，是否有一种纯粹的CSS3方法来做到这一点？谢谢
这是。我希望对齐/堆叠到底部的3个div是.searchForm、.tweetForm和.myMsg。目前，我正诉诸于将.fudgeBox放在顶部，以将它们向下推到底部。
浏览 4提问于2016-05-11得票数 3
回答已采纳
在CSS中是否有一种方法可以告诉内联网格在哪一行的基线上应该垂直对齐？它似乎是一个带有垂直对齐的内联网格容器:基线；使用第一个单元格的基线。但我想使用另一个单元格(或行)的基线。这个是可能的吗？
下面的代码和图像显示了我所拥有的和我想要的。
.grid{
display: inline-grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-gap: 20px;
align-items: baseline;
border: 1px solid blue;
pad
浏览 0提问于2018-07-25得票数 5
1回答
我使用flex在div(容器)中水平显示元素。这些元素都应该是1。向右和底部对齐，2.拉伸完全高度。我可以实现1，2，单独，但不是在一起，他们似乎冲突和伸展似乎凌驾于底部对齐。
有没有一种方法，我可以实现正确的，底部对齐我的内在元素，并使他们伸展充分的高度？注意，我真的不能添加另一个div来包装元素。
.container {
display: flex;
flex-direction: row;
/* Align inner elements right and bottom */
align-items: flex-end;
justify-
浏览 0提问于2020-10-26得票数 1
回答已采纳
2回答
我在用c#做计算器。我知道制作计算器所需的逻辑。但是我面临的问题是UI，我想让文本在我的TextBox的右边和底部，而TextAlign属性使TextBox中的文本对齐到右边，我很难使它与底部对齐?我真的尝试了找到一个答案。
但我想要这样的东西
另外，当我按任意运算符时，如何将文本框中的文本移动到稍高的位置？
浏览 7提问于2014-12-17得票数 0
回答已采纳
2回答
我试图对齐图片底部的文字“约”。红线表示我希望在底部对齐的文本中的位置。然而，无论我尝试什么，当我在桌面和移动上尝试它时，都会给出不一致的结果。它目前在我的笔记本上工作，你可以在这里看到它 (点击图片‘打开’幻灯片。)
这就是html的样子：(它托管在github，所以我使用液体标记)
<div class="slide_title">
<span>{{ include.title }}</span>
</div>
<div class="slide_heading clickable">
浏览 3提问于2014-12-28得票数 2
回答已采纳
2回答
在一个挠性框中，我如何用两个不同的字体大小垂直对齐文本的底部边缘？
下面是一个非常简单的操作：
您会注意到，flex框中的两个div包含不同大小的字体。align-items属性设置为flex-end，但两个不同的div在底部不对齐。
谢谢!
浏览 4提问于2014-08-28得票数 7
回答已采纳
4回答
使用CSS对齐图像列表
、、、
我想要将一组图像对齐到“底部”，如何使用CSS来实现这一点？
背景:我想要一组照片对齐到底部，图像是不同的大小。
<div>
<ul>
<li> <!-- image 1-->
<li> <!-- image 2-->
<li> <!-- image 3-->
</ul>
</div>
谢谢。
浏览 2提问于2009-10-06得票数 0
回答已采纳
所以假设我有以下几点：
<div class="row-fluid container">
<div class="span2">
<image of height 100px>
</div>
<div class="span10 inner">
<span class="title">some title</span>
</div>
</div>
我如何将其
浏览 5提问于2014-10-06得票数 0
我试图让我的所有li元素占据包含它们的ul元素的整个高度，然后将所有li元素内容对齐到底部。
我无法通过第一部分，当我在其中一个li元素中有一个图像时，另一个li元素不会扩展到相同的高度。
这是我的html
<nav id="sliderNav">
<ul id="sliderWrap">
<li>wow 1</li>
<li>wow2<br /> cool
</li>
<li>
<img sr
浏览 1提问于2012-07-18得票数 1
5回答
如何将引导行对齐到容器的底部？
如下所示：
<main class="bd-masthead container-fluid" id="" role="main" style="padding-top:5rem;">
<div class="row">
<div class="col">
<h1 class="text-light">
LukeBank
</h1>
浏览 1提问于2017-12-09得票数 11
回答已采纳
4回答
我有一个固定高度的div标签。大多数图像具有相同的高度和宽度。
我希望在div的底部对齐图像，这样它们就可以很好地排列。这是我到目前为止所知道的：
<div id="randomContainer">
<div id="imageContainer">
<img src="1.png" alt=""/>
<img src="2.png" alt=""/>
<img src="3.pn
浏览 2提问于2011-06-29得票数 48
回答已采纳
我正在尝试做一个100%高的布局，底部有一个页脚。我有一个站点包装器，其中有两个内容div。在第二个content div中，我在底部有一个页脚。问题是顶部的内容div似乎将第二个内容div推到了网站包装器之外。
这是我正在试验的代码：
<style type="text/css">
html, body { height:100%;}
#sitecontainer {
height:100%;
border: medium #000 solid;
}
#contentcontainerone{
border: medium #F00
浏览 1提问于2010-11-27得票数 2
2回答
我正在尝试将文本放在容器的顶部，img放在底部。底部对齐不起作用
<th id="ship_method" colspan="1" rowspan="1">
<div style="vertical-align:top;">Ship Method</div>
<div style="vertical-align:bottom;">
<img src="unsortImg.png">
</div>
</th>
浏览 0提问于2013-06-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
