"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

Separate a single large table into two smaller tables based on the information found in the third column of every row

Looking for a Greasemonkey script that can split a single table on a page into two separate tables based on a specific column. For example, if we have the following table: <table> <tr> <td>Jill</td> <td>Smith</td ...

javascriptjqueryhtmlhtml-tablegreasemonkey

Lack of animation on the button

Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what&ap ...

javascripthtmlcsssvelte

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

Rails does not transfer data-attributes in HTML5

I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...

javascriptjqueryruby-on-railshtml

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

My modal is almost working perfectly - it changes content based on the clicked image, but it is triggering twice in the backend and I can't figure out why! I followed Bootstrap's documentation for this, so I'm unsure where the issue lies. Al ...

javascripthtmlbootstrap-modalbootstrap-5

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

Move the button text back to its original position with animation

I have a button with text that shifts to the right by 15px when hovered over. However, when the cursor is removed, the text immediately snaps back instead of smoothly transitioning back to its original position. I tried setting the ease-in-out property but ...

htmlcss

Switch images when hovering

I currently have two dropdown menus called NEW and SHOP. When I hover over the New Menu 1, it should display the corresponding image. Similarly, when hovering over New Menu 2, the related image should be shown in a div with the ".menu-viewer" class. Whil ...

jquerycss

The div element is overflowing beyond the available space

I have already searched for a solution to this question, but despite trying everything, I have not been able to find one. Therefore, I am asking again, my apologies :-). My challenge is to make a row fill all the remaining screen space on the page, but no ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

Elements inside the Bootstrap 3 navbar are actually external

I am having trouble with the collapsible navbar, specifically the alignment of the right side. Here is the code snippet related to it: <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Having difficulty with PHP code, attempting to output some HTML while also opening a file and displaying its contents

I'm completely new to PHP and I've been experimenting with some code to display button elements that, when pressed, should open a file and write a number to it. Unfortunately, the code doesn't seem to be working as expected and I'm stru ...

phphtml

Issue with Tooltip Position when Scrolling Sidebar is causing display problems

My goal is to create a Sidebar with Tooltip attached to its <li> elements similar to this example: Screenshot - Good Tooltip However, I am facing an issue where the position of the Tooltip breaks when scrolling to the bottom of the sidebar, causing ...

javascripthtmlcss

Tips for transferring input values from a JavaScript function to a separate PHP page for storage in a database

This code snippet allows dynamic rows to be added to a table when the add button is clicked. Now, the goal is to retrieve the values entered into the text boxes and submit them to the database. <div id="addinput"> <p> <button name=" ...

javascriptphpjqueryhtmlajax

The iframe does not completely fill the col-sm column

https://i.sstatic.net/VeqFj.jpgHaving an issue styling embedded Grafana panels on my website. How can I adjust the iframes to fit within col-sm without large margins (refer to attached screenshot) This is my html: <p class= ...

htmlbootstrap-5

The presence of the `class` attribute on the `td` element

Is there a reason why the rows with the "odd" td class in this script do not toggle to blue like the rows without the "odd" class? EDIT: When you click on a row (tr), it is supposed to turn blue (.hltclick) and return to its original color when clicked ag ...

jqueryhtmlcss

Troubleshooting a unique CSS problem on an Android PhoneGap

We are currently working on an Android application using PhoneGap, HTML, CSS, and jQuery Mobile. After compiling the application in Eclipse, everything seems to work correctly. However, I am facing an issue where my CSS styles are not updating when recompi ...

androidjqueryhtmlcsscordova

Learn how to dynamically toggle the visibility of tabs in CodeMirror with a simple button click

Currently, I am developing a Python editor for a website using the Code Mirror JavaScript library. There is a button called toggle invisibles that, when clicked, displays spaces and end-of-line markers. I also wanted to show tabs, which are not supported b ...

javascriptpythonjquerycsscodemirror

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

csstwitter-bootstrapresponsive-design

Utilize HTML5 to send a document to Google Drive API

I'm currently developing a Google Chrome extension that utilizes the Google Drive API to upload files. While handling text files isn't an issue, I encounter errors when attempting to upload binary files. When trying to upload a file using the Fi ...

htmlfile-uploadgoogle-drive-api