"Position centrally on the inside, using flexbox to fill the entire

Seeking assistance with aligning the text in the center of the flexboxes so that the h4 and p elements in the large box are centered within their respective boxes, as well as ensuring the text in the two smaller boxes is also centered. Any help would be greatly appreciated.

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.equal-height-container {
margin: 0 auto;
display: flex;
height: 100vh;
}


.first {
background-color: #fff;
padding: 20px;
flex: 1;
}
  


.second {
background-color: yellow;
flex: 1;
display: flex;
flex-direction: column;
}



.second-a {
background-color: #c0dbe2;
flex: 1;
padding: 20px;
}


.second-b {
background-color: honeydew;
flex: 1;
padding: 20px;
}
<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum is a placeholder text used by the printing and publishing industry. Lorem ipsum has been the standard dummy text since the 1500s.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum is a placeholder text used by the printing and publishing industry. Lorem ipsum has been the standard dummy text since the 1500s,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum is a placeholder text used by the printing and publishing industry. Lorem ipsum has been the standard dummy text since the 1500s,</p>
    </div>
  </div>

htmlcssflexboxfullscreencenter

Answer №1

To center items horizontally and vertically, use the properties align-items: center and justify-content: center.

Apply the flex alignment property to elements with classes .first, .second-a, and .second-b as shown below:

.equal-height-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.first, .second-a, .second-b {
    display: flex;
    align-items: center;
}

Take a look at the code snippet provided for a clearer understanding:

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}

.equal-height-container {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}


.first {
background-color: #fff;
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 40px);
}



.second {
background-color: yellow;
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
}



.second-a {
background-color: #c0dbe2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 20px);
padding: 20px;
}


.second-b {
background-color: honeydew;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 20px);
padding: 20px;
}

h4 {
margin-bottom: 0;
}
<div class="equal-height-container">
<div class="first">
<h4>Feature1</h4>
<p>Lorem Ipsum is placeholder text used in the printing and publishing industry. It has been the industry's standard dummy text since the 1500s.</p>
</div>
<div class="second">
<div class="second-a">
<h4>Feature1</h4>
<p>Lorem Ipsum is placeholder text used in the printing and publishing industry. It has been the industry's standard dummy text since the 1500s.</p>
</div>
<div class="second-b">
<h4>Feature1</h4>
<p>Lorem Ipsum is placeholder text used in the printing and publishing industry. It has been the industry's standard dummy text since the 1500s.</p>
</div>
</div>

I trust this information proves useful!

Answer №2

Make sure to apply text-align: center; to the immediate children of 

.equal-height-container >  div

Remember that > signifies the direct child element

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.equal-height-container {
margin: 0 auto;
display: flex;
height: 100vh;
}
.equal-height-container >  div {
text-align: center;
}
    

.first {
background-color: #fff;
padding: 20px;
flex: 1;
 }
  



.second {
background-color: yellow;
flex: 1;
display: flex;
flex-direction: column;
}



.second-a {
background-color: #c0dbe2;
flex: 1;
padding: 20px;
}


.second-b {
background-color: honeydew;
flex: 1;
padding: 20px;
}
<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum is placeholder text used in the publishing and graphic design industry since the 1500s.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum is placeholder text used in the publishing and graphic design industry since the 1500s,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum is placeholder text used in the publishing and graphic design industry since the           1500s,</p>
    </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

Typewriter Effect: The caret is advancing too quickly

I am trying to achieve a typewriter effect on my text, but the blinking cursor is extending further than the actual text. See Image for Problem Here is the code I am using: HTML: <div class="title"> <h1>Hi, I'm ConnerDE< ...

htmlcss

Tips for defining a relative path in the base URL with AngularJS

Encountering an issue with AngularJS routes related to file paths. The folder structure is as follows: js -> Angular -> css -> Bootstrap -> index.html Routes work fine when hosted on a server like IIS. However, copying and pasting the direct ...

javascripthtmlcssangularjs

What is the best way to show an HTML file in a WebBrowser using C++?

Currently, I'm facing the challenge of displaying an HTML file in a WebBrowser within a Windows application. The issue lies in the fact that I am dealing with a local file instead of a URL. My attempted solution with file://MyWeb.html proved unsuccess ...

htmlc++url

Leveraging backstretch.js in combination with blur.js (or equivalent)

Query Update I provided a response to the query below, however, I am experiencing some lag and a noticeable stepped transition between images. Can anyone offer advice on how to optimize this issue? Perhaps it would be better to go back to using a static ...

javascriptjquerycssbackground-image

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...

htmlcsstwitter-bootstrapipad

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

javascriptjquerycsshtml

Tips for creating a captivating full-screen parallax section on your website

Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...

jquerycsswebfullscreen

How to Keep Bootstrap 3 Accordion Open Even When Collapsed

I am in the process of building an accordion group with bootstrap 3. Here is the code I have so far: <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <div class ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists

Retrieving radio button value in Angular 2

Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...

javascripthtmltemplatesangular

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

javascriptjqueryhtmlcssowl-carousel

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...

javascriptphpjqueryhtmlajax

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

htmlcss

What is a more effective way to showcase tab content than using an iframe?

I currently have a webpage set up with three tabs and an iframe that displays the content of the tab clicked. The source code for each tab's content is stored in separate HTML and CSS files. However, I've noticed that when a tab is clicked, the ...

javascripthtmlcssiframetabs

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

htmlcssmenuscreen-resolutionfont-size

What is the best method for eliminating the initial character in every line of a textarea?

The desired output should display as LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no instead of >LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no. Is there a way to achieve this using JavaScript? Specifically, the ">" character at the beginnin ...

javascripthtml

Difficulty Aligning Angular Material Expansion Panel with mat-nav-listI am facing an issue with

Currently, I have implemented a mat-nav-list to showcase the Menu items on my webpage. However, there seems to be an alignment issue with the 4th Menu item which is an Angular Material Expansion control. Refer to the screenshot provided below for clarifica ...

htmlcssangularangular-material

Nested click jQuery with draggable elements

After taking advice from @amphetamachine in this thread, I was able to successfully manage nested clicks using jQuery. However, the drag feature that was previously functioning perfectly has now stopped working since I implemented the delegates. The main ...

jqueryhtmljquery-ui

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango