How to Position Two Child Divs in the Center of a Parent Div

I have been searching extensively, but I can't seem to find a solution to my problem. Let me explain with a simple example. I have two child div elements within a parent div, and I want them to be centered horizontally inside the parent div. Here is the link to 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>

Is there a simple solution that I am overlooking? I also have another question regarding the h3 tag. When the comment around the h3 tag is removed, the first div shifts down. What characteristic of the h3 tag causes the div to shift down and how can I prevent it?

Thank you for your assistance and explanations, and I apologize if this question has been asked before.

htmlcss

Answer №1

Insert the following code snippet into the #container:

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

Interactive Code Example:

#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">
    <!--
   Once this comment is removed, the div shifts downward and the cause is unclear to me.
    <h3>This Title Moves the div down. Why?</h3>-->
  </div>
  <div class="tile"></div>
</div>

Answer №2

You should implement the following CSS code: .title { display: block; }

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

.tile {
  border: 2px solid black;
  display: block;
  height: 50em;
  margin: 1em auto;
  width: 25em;
  text-align:justify;
  padding:10px;
}

h3 {
  margin: 5px;
  padding: 2px;
}
<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>

Answer №3

For centering elements, you can apply margin:auto to the .tile class and text-align:center to the #container ID.

#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>

Answer №4

By default, when you use the display:inline-block property, the vertical-align: bottom; setting applies. To override this, you can set the 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;
}

To see the working code example, visit: https://jsfiddle.net/e8on1cko/5/

Answer №5

   ` `


#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 downwards. Why is that?</h3>
  </div>
  <div class="tile"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for dividing the WordPress header navigation horizontally using separate PHP files

I am trying to customize my WordPress menu navigation by splitting it into two sections: left and right. I have added the menu function in the "functions.php" file to create the menu from the backend, and the frontend modifications will be done in the "hea ...

phpcsswordpressheadernavigation

Removing HTML tags from a string while preserving specific tags in JavaScript

Here is a JavaScript string that I am working with: var test = "<p>test</p> FOLER.PRODUCTS<12345><level-2>"; I'm trying to remove the HTML tags from the string because the service I'm using doesn't accept them. Here ...

javascripthtml

Scrolling without limits - cylindrical webpage (CSS/JS)

Is it possible to create a page that infinitely scrolls from top to top without going straight back to the top, but instead showing the bottom content below after reaching it? Imagine being able to scroll up and see the bottom above the top like a 3D cylin ...

javascripthtmlcssscrollinfinite

Use jQuery to replace this color with that color in CSS every time it appears

I have numerous div elements, some with a background-color: #aaa, others with font color: #aaa, and some with border-color: #aaa. There are also divs with various other colors. I am looking to update these colors (#aaa) to #ccc throughout the CSS. While ...

jquerycsscolorsreplace

What is the best way to adjust a component to display varying content based on the scenario?

I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have imple ...

htmlcssvue.js

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

What is the method for setting an image to stretch and fill the divided screen?

I'm having trouble getting my image to fill the screen correctly on a split screen. The top half of the screen has an image, while the bottom half has text. No matter what I do, there always seems to be a blank space either at the top of the image or ...

androidcss

Locator for finding compound text within a div class using Selenium WebDriver

I am struggling to select a specific button in the UI that shares similarities with other elements. Below is the code snippet for the button in question: <div class="ui green ok inverted button"> <i class="checkmark icon"></i> Yes </d ...

htmlcssseleniumxpathwebdriver

The transitionend event fails to trigger upon losing focus

When I attach a transitionend event listener to element using the code below, everything works smoothly: element.addEventListener('transitionend', transitionEnd); function transitionEnd() { console.log('transitionEnd fired') ...

javascripthtmlcss

Sass flex order has no effect on elements that are generated

I encountered an issue with the rendering of SVGs in my project. Currently, they are displayed correctly in desktop mode, but in mobile portrait mode, I need to change the order of one specific SVG element within the row. To achieve this, I decided to use ...

cssreactjssvgsassflexbox

Issues encountered with PHP integration for Bootstrap carousel

I'm facing a challenge with modifying an existing carousel to load data from an SQL database instead of hardcoding it. After successfully fetching the data using PHP, I noticed that the controls of the carousel are not functioning as expected. Upon i ...

phphtmltwitter-bootstrap

Tips for adjusting image placement in cell or xs mode using bootstrap 4

Hope you're doing well. I have a specific requirement where I need the image to be displayed to the right of the title when switching to cellular xs mode. For instance, the title should take up col-xs-9 and the image should take up col-xs-3. In the pa ...

htmlcssbootstrap-4styles

Is it possible to activate multiple animations simultaneously within a single div using UIKit?

I recently started developing a to-do web application and was looking to enhance its appearance with some animations using UIKit. Currently, I have an animation that toggles when the todo-items are brought into view: <div class="todo-items uk-anim ...

javascripthtmlvue.jsanimationuikit

How come the "colspan" attribute is not functioning properly in my table?

Check out the simple table form I created on jsfiddle. Here is the code snippet: <table> <tr> <td class="field_label">name</td> <td>*</td> <td> <input type="text"> ...

javascriptjqueryhtml

What is the best way to position a tooltip near an element for optimal visibility?

One div is located on the page as follows: <div id="tip"> Text for tip goes here... </div> And another one can be found below: <div class="element"> Text for element goes here... </div> There is also a piece of JavaScript ...

javascriptjqueryhtmlcsshover

Tips for designing scrollable overlay content:

I am currently in the process of building a page inspired by the design of Hello Monday. Right now, I have added static content before implementing the parallax effect and auto-scroll. Here is my progress so far: Check out the Sandbox Link One challenge ...

javascripthtmlcssoverlay

div.load() results in a complete page reload

When I save form data, my goal is to load only the specific div without refreshing the entire page. However, despite using the preventDefault() command, the form still seems to be posting the whole page. I have tried adding the following code: $("#btn ...

javascriptjqueryhtmlasp.net-mvc

PHP file secured to only accept variables posted from HTML form

This is a basic HTML/AJAX/PHP script I have implemented. <form id="new_user" action="" method="post"> <div class="col-md-3 form-group"> <label for="username">Username</label> <input type="text" class="form-control" name ...

javascriptphpjqueryhtmlajax

What is the best way to incorporate tooltips in SVG?

My teacher wants me to display a tooltip on an SVG circle with links and information when we hover over it. They suggested using jQuery UI, but I've done extensive research and nothing has been able to assist me so far. ...

javascripthtmlcss

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

javajavascripthtmlajax