一盒子中一个div居中一个button靠右
时间: 2024-10-16 07:08:42 浏览: 5
要在HTML中实现一个盒子里有一个`<div>`居中显示和一个`<button>`元素靠右对齐,可以采用CSS布局技术,比如Flexbox或Grid。这里提供一种使用Flexbox的方式:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex; /* 使用Flexbox */
justify-content: center; /* 居中水平方向 */
align-items: center; /* 居中垂直方向 */
height: 100vh; /* 设置容器高度,视口高度 */
padding: 20px;
box-sizing: border-box;
}
.right-button {
margin-left: auto; /* 靠右对齐 */
}
</style>
</head>
<body>
<div class="container">
<div style="width: 50%; background-color: #f00;"> <!-- 设置div的宽度并设背景色示例 -->
中心内容
</div>
<button class="right-button">按钮</button>
</div>
</body>
</html>
```
在这个例子中,`.container`是一个包含两个元素的容器,`.center-content`通过`justify-content: center`和`align-items: center`使其在容器内水平和垂直居中,而`.right-button`则通过`margin-left: auto`自动获取剩余空间并在左边对齐。
阅读全文