在CSS Grid

时间:2018-01-12 18:27:17

标签: css css3 flexbox centering css-grid

我有一个有3行,1列的网格,中间行的项目是2列4行的网格本身。

CSS代码段

.css-grid-container-common-styles{
    height:100vh; /*???*/
    display: grid;
    grid-template-columns: 1fr;  /* 1column*/
    grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

HTML代码段

<div class="css-grid-container-common-styles"> <!-- first container -->
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles"> <!-- goes in 1st for -->
</nav>
<div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
<div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container --> </div>
</div>
<div class="css-grid-item-footer-common-styles"> foooter goes here
</div>

问题1 - 我的问题是align-text,而justify-text不适用于嵌入式容器。我想center嵌入式容器的项目,但它们仍然出现在起始位置。我使用了以下规则来使项目居中(一个段落),但它不起作用。

.css-grid-item-practice-para1-div-common-styles{
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

但是,如果我添加display:flex,它就可以了!为什么呢?

.css-grid-item-practice-para1-div-common-styles{
    display:flex; /*work if this is added*/
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

问题2:我添加的按钮(P1,C1)即使使用display:flex

也不会移动到中心位置

以下是完整的代码

CSS

.body-common-styles {
    background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
    color:white;
    font-family: Helvetica;
    line-height: 1;
}

.div-common-styles{
    background-color:#0F2148;
}

.button-common-styles-normal{
    /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%);  */
    background-color: #4da3f8;
    border:none;
    color:white;
    border-radius: 8px;
    width:100px; /* sets the width of the content area to 200 px */
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}   

.button-common-styles-normal:hover {
    background-color:  #268ff4;
}

.center-horizontally-common-styles {
    display: block;
    margin: auto auto;
}

.centre-vertical-common-styles {
   position: fixed; /*Fixed positioning acts similarly to absolute positioning with a couple of differences.*/
   left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
   top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
   transform: translate(-50%, -50%);
}

.centre-button-vertical-common-styles {
   position: absolute; /*An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. */
   left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
   top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
   transform: translate(-50%, -50%);
}

.debug-border-common-styles {
    border: 3px solid black;
    height:200px;
    width:400px;
}

.css-grid-container-common-styles{
    height:100vh; /*???*/
    display: grid;
    grid-template-columns: 1fr;  /* 1column*/
    grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}


.css-grid-item-nav-div-common-styles{
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}

.css-grid-item-info-div-common-styles{
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    align-self: center;
    justify-self:center;

}

.css-grid-item-footer-common-styles{
    grid-column: 1 / -1;
    grid-row: 3 / -1;
    background-color: white;
    color:black;
}

/* info div is a container. It is continer item in css-grid-container-common-styles and it has two items css-grid-container-info-div-common-styles and css-grid-item-practice-div-common-styles*/
.css-grid-container-practice-create-div-common-styles{
    display:grid;
    grid-template-columns: 1fr 1fr;
    /*grid-template-rows: auto auto auto auto;*/
    height:300px; /* could it be made % ?*/
    width:450px;
    border: 1px solid white;
    border-radius: 8px; 
    background-color:white;
    color:black;
    box-shadow: 3px 3px 3px grey;
}

.css-grid-item-practice-para1-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.css-grid-item-practice-para2-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;    
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.css-grid-item-practice-para3-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.css-grid-item-practice-button-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}



.css-grid-item-create-para1-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.css-grid-item-create-para2-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.css-grid-item-create-para3-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.css-grid-item-create-button-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

HTML

<!DOCTYPE html>

<html>
    <head>
        <title>Coding Jedi</title>
        <link rel="stylesheet" media="screen" href="../common/css/css-reset.css">
        <link rel="stylesheet" media="screen" href="../common/css/common-styles.css">
        <link rel="stylesheet" media="screen" href="../common/css/bootstrap.css">

    </head>
    <body class="body-common-styles">
            <div class="css-grid-container-common-styles">
                <nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">CodingJedi</a>
                    <div class="collapse navbar-collapse justify-content-between" id="navbar1">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="widgets.html">About</a>
                            </li>
                        </ul>                   
                    </div>
                </nav>
                <div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
                    <div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container -->
                        <p class="css-grid-item-practice-para1-div-common-styles"> P1. </p>
                        <p class="css-grid-item-practice-para2-div-common-styles"> P2. </p>
                        <p class="css-grid-item-practice-para3-div-common-styles"> P3. </p>
                        <button type="button" class="button-common-styles-normal css-grid-item-practice-button-div-common-styles"> P! </button>                     


                        <p class="css-grid-item-create-para1-div-common-styles"> P4</p>
                        <p class="css-grid-item-create-para2-div-common-styles"> P5</p>
                        <p class="css-grid-item-create-para3-div-common-styles"> P6 </p>
                        <button type="button" class="button-common-styles-normal css-grid-item-create-button-div-common-styles"> C!</button>                        
                    </div>

                </div>
                <div class="css-grid-item-footer-common-styles">
                    footer goes here
                </div>
            </div>
        <script src="../common/javascripts/jquery-3.2.1.js" type="text/javascript"></script>
        <script src="../common/javascripts/bootstrap.js"></script>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

  

问题2:我添加的按钮(P1,C1)即使使用display:flex

也不会移动到中心位置

请注意,当您应用居中规则时......

display: flex;
align-items: center;
justify-content: center;

p元素上,该规则适用于p内容(即文本)。这才是实际上的中心。

同样,当您将居中规则应用于button元素时,它也会使button的内容(即文本)居中。

您希望它将按钮本身居中。如果规则不以p为中心,则它也不会使button兄弟姐妹居中。

如果您想将按钮元素居中,请尝试以下操作:

button {
   align-self: center;
   justify-self: center;
}

https://jsfiddle.net/jz15cLhd/

至于另一个问题,我没有看到它。我得到的结果与display: flexdisplay: grid居中相同。

这篇文章可能对您有用:Centering in CSS Grid