CODEWITHSUNDEEP
htmlcss
prestondoris
prestondoris

Reputation: 329

Centering two child Divs inside parent Div

I know this has been discussed in length, but I cannot seem to find an answer to solve this problem. This is a simple example to illustrate my issue. I have two children div elements inside a parent div and I want them to be horizontally centered inside the parent div. Here is the fiddle:

JSFiddle

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;
}

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
}
<div id="container">
  <div class="tile">
    <!--
   When you remove this comment, the div shifts down and I do not understand what is causing that.
    <h3>This Title Moves the div down. Why?</h3>-->
  </div>
  <div class="tile"></div>
</div>

Now is there a simple solution that I am missing? Also, I have a secondary question about the h3 tag as well. When the comment around the h3 tag is removed, the first div shifts down. What about the h3 tag is causing the div to shift down and how do I prevent it from happening?

Thanks for your answers and your help, and I apologize for a potential repeat question.

Upvotes: 0

Views: 2350

Answers (5)

Santosh
Santosh

Reputation: 11

   ` `


#container {
       padding:25%;
       text-align:center;
       background:#e7e7e7;
    }
    
.tile{
       background:white;
       display:inline-block;
       padding:20%;
    }
<div id="container">
  <div class="tile">
    <h3>This Title Moves the div down. Why?</h3>
  </div>
  <div class="tile"></div>
</div>

Upvotes: 0

Rafiqul Islam
Rafiqul Islam

Reputation: 961

You can add: .title { display: block; }

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;
  
}

.tile {
  border: 1px solid black;
  display: block;
  height: 40em;
  margin: 1.5em auto;
  width: 20em;
  text-align:justify;
  padding:7px;
}

h3 {
  margin: 0;
  padding: 0;
}
<div id="container">
  <div class="tile">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </div>
  <div class="tile">
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  </div>
</div>

Upvotes: 2

cypark
cypark

Reputation: 955

Add below code to #container:

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

Live Snippet

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;

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

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em 0;
}
<div id="container">
  <div class="tile">
    <!--
   When you remove this comment, the div shifts down and I do not understand what is causing that.
    <h3>This Title Moves the div down. Why?</h3>-->
  </div>
  <div class="tile"></div>
</div>

Upvotes: 4

Dij
Dij

Reputation: 9808

you can add margin:auto to .tile and text-align:center to #container

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;
    text-align: center;
}

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: auto;
}
<div id="container">
  <div class="tile">
    <h3>This Title Moves the div down. Why?</h3>
  </div>
  <div class="tile"></div>
</div>

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6328

When you use display:inline-block by default was vertical-align: bottom; so that set css for .tile to vertical-align: middle; and text-align:center to #container

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
    vertical-align: middle;
}

Working Code: https://jsfiddle.net/e8on1cko/5/

Upvotes: 0

Related Questions