CODEWITHSUNDEEP
htmlcss
Anirudh Lou
Anirudh Lou

Reputation: 831

How to equally center a div into another div?

I am trying to create div which serves as my menu selection of my website. I want it to put into the center of my parent div. I did a lot of experiment but none of it work. Below is my CSS Code

.cell {
   color: white;
   font-size: .8rem;
   padding: 1rem;
}

.lt-main-menu { 
    grid-area: main-menu; 
    background: deepskyblue;
    height: 80vh;
}

.lt-menu{
    background: black;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0 auto;
    vertical-align:middle;
    text-align:center;
    /*
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    */
}

and this is my html file 

<div class="cell lt-main-menu">
  <div class="lt-menu">
      menu 1
  </div>
  <div class="lt-menu">
      menu 2
  </div>
  <div class="lt-menu">
      menu 3
  </div>
 ...
</div>

What i want is similar to picture below.

enter image description here

Upvotes: 1

Views: 3376

Answers (5)

Alessandro_Russo
Alessandro_Russo

Reputation: 2191

Hi i have created a pen in the CodePen app.

Using Flex you can easily center vertically and horizontally.

.lt-main-menu {
    /*...*/
    display:flex;
    justify-content: center;
    align-items: center;
}

This is the pen https://codepen.io/alessandroinfo/pen/JQPrYm

Upvotes: 2

Trethewey
Trethewey

Reputation: 36

This will do the job. I always find flexbox to work best for aligning things like this.

.cell {
  color: white;
  font-size: .8rem;
  padding: 1rem;
}

.lt-main-menu {
  width: 100%;
  background: deepskyblue;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lt-menu {
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  text-align: center;
  display: inline-block;
}

Demo: https://jsfiddle.net/trethewey/qs1kvuf5/16/

Upvotes: 1

JkAlombro
JkAlombro

Reputation: 1824

Try this.

.cell {
   position: relative;
   color: white;
   font-size: .8rem;
   padding: 1rem;
}

.box-containers {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.lt-main-menu { 
    grid-area: main-menu; 
    background: deepskyblue;
    height: 80vh;
}

.lt-menu{
    background: black;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0 auto;
    vertical-align:middle;
    text-align:center;
    /*
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    */
}
<div class="cell lt-main-menu">
  <div class="box-containers">
    <div class="lt-menu">
      menu 1
    </div>
    <div class="lt-menu">
        menu 2
    </div>
    <div class="lt-menu">
        menu 3
    </div>
  </div>
</div>

You can also have some other references HERE.

Upvotes: 0

Stefan Joseph
Stefan Joseph

Reputation: 555

Try using display: flex to align items. This is a sample code. Hope this helps

HTML

<div class="d-flex flex-row align-items-start m-2">
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
</div>

<div class="d-flex flex-row align-items-center justify-content-center m-2">
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
</div>

CSS 

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.container-block {
  width: 100px;
  height: 100px;
  background: black;
  margin: 0 5px;
}

.m-2 {
  margin: 0.5rem;
}

JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/dbguqy6w/

Upvotes: 1

Luca Zambon
Luca Zambon

Reputation: 101

Try something like that, using flex properties:

<style type="text/css">
    .cell {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lt-menu {
        margin: 10px 0;
    }
</style>

<div class="cell lt-main-menu">
    <div class="cell-wrapper">
        <div class="lt-menu">menu 1</div>
        <div class="lt-menu">menu 2</div>
        <div class="lt-menu">menu 3</div>
    </div>
</div>

Upvotes: 1

Related Questions