CSS中,设置盒子的高为210px
时间: 2024-05-25 14:19:41 浏览: 11
,宽为400px,如何使其水平垂直居中?
可以使用以下CSS代码实现:
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 210px;
width: 400px;
}
这样就可以让盒子在页面中水平垂直居中了。
相关问题
一个高为117px的长方形的div盒子 上中下 分为高为20px三份小的div
好的,可以使用以下 HTML 和 CSS 代码实现这个布局:
HTML代码:
```html
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
```
CSS代码:
```css
.container {
height: 117px;
border: 1px solid #000; /* 方便观察 */
position: relative;
}
.container div {
height: 20px;
position: absolute;
width: 100%;
top: 0;
}
.top {
background-color: red;
top: 0;
}
.middle {
background-color: green;
top: 20px;
}
.bottom {
background-color: blue;
bottom: 0;
}
```
其中,`container` 是包含三个小 `div` 的父元素,`top`、`middle`、`bottom` 表示三个小 `div`。通过设置 `position: absolute` 可以让三个小的 `div` 相对于 `container` 定位。`top`、`middle`、`bottom` 分别设置了不同的 `top` 和 `bottom` 值实现了上中下三个小 `div` 的分布。
一个高为117px的长方形的div盒子 分为高为20px三份小的div
好的,可以使用以下 HTML 和 CSS 代码实现这个布局:
HTML代码:
```html
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
```
CSS代码:
```css
.container {
height: 117px;
border: 1px solid #000; /* 方便观察 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.child {
height: 20px;
background-color: gray;
}
```
其中,`container` 是包含三个小 `div` 的父元素,`child` 表示三个小 `div`。通过设置 `display: flex` 和 `flex-direction: column` 可以让三个小的 `div` 沿垂直方向排列。通过设置 `justify-content: space-between` 可以让三个小的 `div` 之间的距离平均分配,实现了上中下三个小 `div` 的分布。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)