请用bootstrap来将图片和文本对齐<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学院官网</title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" /> <script src="../js/jquery.slim.min.js"></script> <script src="../js/bootstrap.bu
时间: 2023-07-02 20:22:20 浏览: 249
以下是一个使用 Bootstrap 将图片和文本对齐的示例代码:
```html
<div class="row">
<div class="col-md-4">
<img src="your-image-url" class="img-fluid" alt="your image description">
</div>
<div class="col-md-8">
<h2>Your Title</h2>
<p>Your text description</p>
</div>
</div>
```
解释一下代码:
- `row` 是 Bootstrap 中用来创建网格布局的基本元素,表示一行;
- `col-md-4` 表示在中等屏幕尺寸下占据 4 个网格,即 1/3 的宽度;
- `img-fluid` 是 Bootstrap 中用来使图片自适应容器宽度的类;
- `col-md-8` 表示在中等屏幕尺寸下占据 8 个网格,即 2/3 的宽度;
- `h2` 和 `p` 分别表示标题和文本段落。
这样,图片和文本就可以水平对齐了。
相关问题
<%@ 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;
}
```
这将使表单在垂直和水平方向上都居中对齐。
阅读全文