使用Bootstrap,使<div class="container">位于页面底部居中
时间: 2024-03-02 15:48:56 浏览: 21
可以使用以下CSS样式来实现:
```css
.container {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
```
在HTML中,将该样式应用于包含`<div class="container">`的父元素即可让其位于页面底部居中。例如:
```html
<div class="wrapper">
<div class="container">
<!-- 内容 -->
</div>
</div>
```
然后在CSS中应用样式:
```css
.wrapper {
position: relative;
min-height: 100vh;
}
```
这将确保页面的高度至少与浏览器窗口的高度相同,以确保容器始终位于页面底部。
相关问题
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Hotel.WebForm1" EnableEventValidation="false" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="Assets/Libraries/Bootstrap/css/bootstrap.min.css" /> <style> body{ background-image:url(../Assets/Images/hotel4.jpg); background-size:cover; } .container-fluid{ opacity:0.9; } </style> </head> <body> <form id="form1" runat="server" > <div> <div class="container-fluid"> <div class="row" style="height:200px"></div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4 bg-light rounded-3"> <h1 class="text-text-success text-center">皇家理工度假酒店</h1> <form> <div class="mb-3"> <label for="UserTb" class="form-label">用户名</label> <input type="text" class="form-control" id="UserTb" runat="server" required="required"> </div> <div class="mb-3"> <label for="PasswordTb" class="form-label">密码</label> <input type="password" class="form-control" id="PasswordTb" runat="server" required="required"> </div> <div class="mb-3"> <label id="ErrMsg" class="text-danger" runat="server"></label> <input type="radio" id="AdminCb" runat="server" name="Role"><label class="text-success">管理员</label> <input type="radio" id="UserCb" runat="server" name="Role"><label class="text-success">用户</label> </div> <div class="d-grid"> <asp:Button ID="LoginBtn" runat="server" Text="登陆" class="btn btn-success btn-block" OnClick="LoginBtn_Click" /> </div> <br /> </form> </div> <div class="col-md-4"></div> </div> </div> </div> </form> </body> </html>我在form中添加了align=center属性但是删除后却依旧运行了原先配置
根据你提供的代码,我没有发现在form标签中有align=center属性。可能是你误解了代码中的某个元素所表现的效果。请注意,在HTML5中,align属性已被废弃,建议使用CSS来控制元素的对齐。另外,如果你想让整个表单居中,可以使用以下CSS代码:
```css
form {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
```
这将使表单在垂直和水平方向上都居中对齐。
<div class="container-fluid d-flex justify-content-center align-items-center" style="height: 100vh;"> <div class="row"> <div class="col-md-12">,这些参数什么意思,如何布局
这是一个HTML标签,用于实现一个在视窗中居中的布局,具体参数说明如下:
- `container-fluid`: 这是Bootstrap中的一个类,表示创建一个宽度占据整个视窗的容器。
- `d-flex`: 这也是Bootstrap中的一个类,表示将容器设置为flex容器,使子元素可以通过flex布局来排列。
- `justify-content-center`: 这个类用于将子元素在flex容器中水平居中排列。
- `align-items-center`: 这个类用于将子元素在flex容器中垂直居中排列。
- `style="height: 100vh;"`: 这个style属性用于设置容器的高度占据视窗的100%。vh是一个相对长度单位,表示视窗的高度的百分之一。
其中,`<div class="row">`是用于创建一个行元素,`<div class="col-md-12">`是用于创建一个占据整个宽度的列元素。因此,该代码段的布局是居中显示一个占据整个宽度的元素。可以在该元素内添加其他元素,用于实现更具体的布局。