flex 设置上下都居中 <div class="btn-not-sel"><span>零售用户</span></div>
时间: 2024-06-09 17:03:14 浏览: 30
可以使用flex布局的align-items属性和justify-content属性来实现上下居中和左右居中。
具体方法如下:
1.将父元素的display属性设置为flex。
2.使用align-items属性来设置子元素在交叉轴上的对齐方式,可以将其设置为center。
3.使用justify-content属性来设置子元素在主轴上的对齐方式,可以将其设置为center。
示例代码如下:
```
<style>
.btn-not-sel{
display:flex;
align-items:center;
justify-content:center;
height:100px;
}
</style>
<div class="btn-not-sel">
<span>零售用户</span>
</div>
```
相关问题
让四个<div class="row"> <div class="col-md-3"> <div class="card mb-3 shadow-sm"> <img src="img/9.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">醇粹 狗粮中大型犬成犬粮 </h5> <p class="card-text">金毛萨摩狗粮 皮肤毛发柔顺全价全犬种15kg</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-cart-fill"></i>加入购物车</button> </div> <small class="text-muted">$209</small> </div> </div> </div> </div>在同一行
可以使用 Bootstrap 栅格系统的 `col-md-*` 类来控制每个卡片的宽度,并将它们放入一个共同的 `row` 中以让它们在同一行显示。例如:
```html
<div class="row">
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
</div>
```
这个代码将四个卡片放在同一行,并且每个卡片的宽度为其父元素(即 `col-md-3`)的四分之一。你可以根据需要调整卡片的宽度和数量。
现有一段bootstrap代码: <!--/.direct-chat-messages--> <div class="direct-chat-red col-md-12 mx-1.5"> <!-- /.card-header --> <!-- Message to the right --> <div class="direct-chat-msg right"> <!--简头向右--> <div class="direct-chat-infos clearfix"> @* <span class="direct-chat-name float-left">评价</span> <!--左上文字--> *@ @* <span class="direct-chat-timestamp float-Right">23 Jan 2:05 pm</span> <!--右上文字--> *@ <div class="text-right"> <input type="submit" id="btpj" value="评价" class="btn btn-dark btn-sm" /> </div> </div> <!-- /.direct-chat-infos --> <!-- /.direct-chat-img --> <div class="direct-chat-text form-control" id="tit"> <!--评级显示--> </div> </div> </div> 但是当前的按钮submit却不在这个元素的红色范围内,如何让其重叠到元素内右置
你可以将按钮放在 `direct-chat-infos` 元素中,并设置 `text-right` 类,这样按钮就会被右对齐并覆盖在消息框的右侧。代码如下:
```html
<!--/.direct-chat-messages-->
<div class="direct-chat-red col-md-12 mx-1.5">
<!-- /.card-header -->
<!-- Message to the right -->
<div class="direct-chat-msg right"> <!--简头向右-->
<div class="direct-chat-infos clearfix">
<!-- <span class="direct-chat-name float-left">评价</span> <!--左上文字-->
<!-- <span class="direct-chat-timestamp float-Right">23 Jan 2:05 pm</span> <!--右上文字-->
<div class="text-right">
<input type="submit" id="btpj" value="评价" class="btn btn-dark btn-sm" />
</div>
</div>
<!-- /.direct-chat-infos -->
<!-- /.direct-chat-img -->
<div class="direct-chat-text form-control" id="tit">
<!--评级显示-->
</div>
</div>
</div>
```
注意,你可能需要根据实际情况调整元素的样式和大小,以确保按钮可以完全覆盖在消息框的右侧。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<html> <head> <meta charset="utf-8" /> <title>星星国际影城</title> <script src="js/main.js" type="text/javascript"></script> </head> <body> 登录| 注册| 全国服务热线:888-8888888 < img src="images/logo.jpg" title="" alt="logo" /> 首页 影片 影城 购票 影城活动 会员服务 顾客互动 <input type="text" placeholder="搜索影片" name="search"/> <input type="button" name="btn" value="" /> < img src="images/b1.png" /> < img src="images/b2.png" /> < img src="images/b3.png" /> 在每行代码进行解释
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)