为了账号安全,请及时绑定邮箱和手机立即绑定

调整页面大小时如何使 CSS 中的这些框居中?

调整页面大小时如何使 CSS 中的这些框居中?

Go
有只小跳蛙 2023-08-21 16:29:42
我有以下盒子(文章)当我尝试调整页面大小时,它变成这样:我希望它在调整窗口大小时自动居中,以避免右侧出现巨大间隙,但它需要采用与现有格式相同的格式。基本上只需将整个组移动到中心,而不将各个框居中,因为我希望它们如图所示向左浮动。编辑:这就是我所追求的:这是我当前的CSS:* {    margin: 0;    padding: 0;}html, body {    height: 100%;}.container {    width: 90%;    height: 100%;    overflow: hidden;    background: skyblue;    margin: auto;    padding: 20px;}.container article {    float: left;    width: 250px;    height: 250px;    background: blue;    margin: 25px}和我的html:<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Shop</title>        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <link rel="stylesheet" href="css/style.css">    </head>    <body>        <div class="container">            <article>                <h2>Hello</h2>            </article>            <article>                <h2>Hello</h2>            </article>            <article>                <h2>Hello</h2>            </article>            <article>                <h2>Hello</h2>            </article>            <article>                <h2>Hello</h2>            </article>        </div>    </body></html>
查看完整描述

2 回答

?
慕莱坞森

TA贡献1810条经验 获得超4个赞

使用灵活性,卢克


display: flex;

flex-wrap: wrap;

justify-content: center;

* {

    margin: 0;

    padding: 0;

}


html, body {

    height: 100%;

}


.container {

    width: 90%;

    height: 100%;

    overflow: hidden;

    background: skyblue;

    margin: auto;

    padding: 20px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}


.container article {

    width: 250px;

    height: 250px;

    background: blue;

    margin: 25px

}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Shop</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/style.css">

    </head>

    <body>

        <div class="container">

            <article>

                <h2>Hello</h2>

            </article>

            <article>

                <h2>Hello</h2>

            </article>

            <article>

                <h2>Hello</h2>

            </article>

            <article>

                <h2>Hello</h2>

            </article>

            <article>

                <h2>Hello</h2>

            </article>

        </div>

    </body>

</html>


查看完整回答
反对 回复 2023-08-21
?
忽然笑

TA贡献1806条经验 获得超5个赞

它没有从左侧包裹盒子,所以我使用 CSS 网格解决了它:


HTML:


<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Title</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/style.css">

    </head>

    <body>

        <div class="grid-container">

            <div class="grid-item">1</div>

            <div class="grid-item">2</div>

            <div class="grid-item">3</div>  

            <div class="grid-item">4</div>

            <div class="grid-item">5</div>

            <div class="grid-item">6</div>  

            <div class="grid-item">7</div>

            <div class="grid-item">8</div>

            <div class="grid-item">9</div>

            <div class="grid-item">10</div>

            <div class="grid-item">11</div> 

            <div class="grid-item">12</div> 

            <div class="grid-item">13</div> 

            <div class="grid-item">14</div> 

        </div>

    </body>

</html>

CSS:


.grid-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, 200px);

    grid-gap: 40px;

    justify-content: center;

    padding: 40px 10px 40px 40px;

    background-color: #2196F3;

}

.grid-item {

    width: 200px;

    height: 200px;

    background-color: #FFFFFF;

    font-size: 30px;

    text-align: left;

}

笔记:

  • grid-template-columns: repeat(auto-fill, 200px); 200px是盒子的宽度。

  • justify-content: center; 用于将容器与盒子一起居中。这可行,但会使盒子稍微偏离中心并偏向右侧。为了补偿,我在右侧添加了10pxpadding: 40px 10px 40px 40px内边距: 。这些值可能有所不同。

工作中的jsfiddle


查看完整回答
反对 回复 2023-08-21
  • 2 回答
  • 0 关注
  • 168 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信