CODEWITHSUNDEEP
htmlcsscenterresponsive
Nicolas Pretot
Nicolas Pretot

Reputation: 192

Center DIV & responsive

I'm trying to build a simple responsive page with 3 square at the center of the page that keep their square shape if we rezise the window.

Here is a litle draw of what i want to do : enter image description here

I'm building this page in an angular environment with materialize, to simplify my problem here is reproduction of my current implementation :

<div class="container-wrapper">
  <div class="container">
    <div style="height: 100%; width:100%">
    <ul class="list-group-horizontal">
      <li class="list-group-item">
        <div class="item-wrapper">
            <i class="material-icons pointer">play_arrow</i>
        </div>
      </li>
      <li class="list-group-item">
        <div class="item-wrapper">
        </div>
      </li>
      <li class="list-group-item">
        <div class="item-wrapper">
        </div>
      </li>
    </ul>
    </div>
  </div>
</div>

And my Css :

.container-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 50;
}
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    padding: 80px 0;
    height: 400px;
    text-align: center;
}


.list-group-horizontal {
    height: 100%;
}


.list-group-horizontal .list-group-item {
    display: inline-block;
}

.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
    height: 100%;
    width: 33%;
}

.item-wrapper {
    vertical-align: middle;
    border: 2px solid #1563aa;
    background: rgba(33, 33, 33, 0.48);
    border-radius: 5px;
    width: 15vw; 
    height: 15vw;
    margin: auto;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

.item-wrapper:hover {
   background-color: rgba(255, 255, 255, 0.4);
}

Also, i would like to center the image (play_arrow) in the center of the div

I'm struggling a lot with css, and i think my css code is not as clean as it could be, if you have any hint for my problems or about a best solution for my current css feel free to answer :)

Thanks

Upvotes: 2

Views: 6175

Answers (2)

john c. j.
john c. j.

Reputation: 1185

I don't intend to post something very original (my answer was second), but here is flex version, instead of grid.

Simply saying, grid is intended to use for aligning large areas of layout, whereas flex is typically better when you need to align some small things, like 3 buttons in a header. But, you still could use flex for creating overall layout, without grid. For example, Chrome inner bookmarks manager created this way.

Also, when talking about flex and CSS-grid, you should note that CSS-grid is very new animal in the world of CSS, and if you think about compatibility with older browsers, flex will be better; compare browser support for Flexbox and CSS-grid.

Test

<div id="boxes">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<style>
#boxes {
    width:100%;
    display: flex;
}

#boxes .box {
    height: 90px;
    margin: 20px;
    width: 90px;
    line-height: 90px;
    text-align: center;
    border: 1px solid Black;
}
</style>

Upvotes: 1

dhiman
dhiman

Reputation: 517

This would work:

#boxes {
width:300px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
text-align:center;

}

#boxes .box {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 1px solid Black;
}
<div id="boxes">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

Upvotes: 1

Related Questions