Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code?

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

p {}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>
</div>

<div class="subtext">
  <p class="sub">
    <div class="box1">
      Wow !
    </div>
    <div class="box2">
      Wow !
    </div>
    <div class="box3">
      Wow !
    </div>
    <div class="box4">
      Wow !
    </div>
</div>

htmlcsstextflexbox

Answer №1

It's best to group the boxes and text together for cleaner markup and fewer potential issues. While you can keep them separate, bundling them up is a more organized approach.

.container {
  display: flex;
  /* flex-direction: row; - not needed (default) */
  justify-content: space-around;
  align-items: center;
}

.container>div {
  flex: 1;
  text-align: center;
}

.square {
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}
<div class="container">
  <div>
    <div class="square"></div>
    <p>Paragraph 1.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 2.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 3.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 4.</p>
  </div>
</div>

Answer №2

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>

<div class="subtext">
  <div class="box1">Amazing!</div>
  <div class="box2">Incredible!</div>
  <div class="box3">Astounding!</div>
  <div class="box4">Unbelievable!</div>
</div>

<p>This text appears below the displayed boxes</p>

Answer №3

Apply the CSS property position absolute to paragraph elements and position relative to their parent element.

Wow!
Wow!
Wow!
Wow!

Answer №4

To create a neat grouping of elements, you can place them within invisible containers and utilize the text-align: center property. Here is an illustration:

.flexbox {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  justify-content: space-evenly;
}

.flexbox article {
  text-align: center;
}

.flexbox div {
  font-size: 4em;
  width: 96px;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}
<div class="flexbox">
  <article><div id="box1">1</div><p>One</p></article>
  <article><div id="box2">2</div><p>Two</p></article>
  <article><div id="box3">3</div><p>Three</p></article>
  <article><div id="box4">4</div><p>Four</p></article>
</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

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

If I have two identical images displayed on a page at different sizes, what is the best option for optimizing performance? On one hand, using an image already sized correctly can improve performance, especially on mobile devices. On the other hand, using t ...

htmlimageperformance

The slider spills over the edges of the page

Seeking assistance – I managed to insert this logo slider onto my page. It seems to be functioning properly, but due to the width settings of the website engine, the modules are not fully stretching across the page. In an attempt to make the slider cove ...

jqueryhtmlcssslider

Tips for accurately relocating elements within a tooltip

Currently, I am working on implementing a like model within a Rails application. In order to display which user liked the bonus, I have incorporated foundation tooltip. Below is the code snippet: - avatars = bonus.like_user_avatars.map { |avatar| image_t ...

jquerycssruby-on-railstooltipzurb-foundation

Navigating through error messages in NextJs 14 can be tricky, especially when faced with the dreaded "ReferenceError: document not defined" or "prerendering error". It's vital to pinpoint exactly which page

When attempting to run the build on my Next.js application, I encountered an error message that is not very informative given the number of files/pages in my project. How can I pinpoint the exact location of this error and determine the root cause? The pro ...

javascripthtmlreactjsnext.jsbuild

What causes Chrome to crash when dealing with lengthy tail files?

My objective is to display a log file in real-time using a websocket connection. However, I am facing performance issues with Chrome when the paragraph ('p') element in the HTML becomes large (about 450 lines). This is the current implementation ...

javascripthtmltailapache-tailer

Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...

htmlcss

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

cssangularmaterial-uiangular-materialmat-datepicker

Adjust the background color of the date and time selection tool

Trying to customize the background of a datetime picker created using jquery.pttimeselect.js. Despite linking the correct css file (jquery.pttimeselect.css), I am unable to change the background color. Any suggestions on how to successfully modify the ba ...

jquerycssdatetimepicker

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

javascripthtmljsonxmlhttprequest

How to utilize the reduce method with an array of objects in JavaScript

Every week, a number of objects are delivered to me. Each object contains information such as date, hours, and other fields. I need to arrange these objects in an array based on the total hours for each day. Here is an example of the objects: var anArray ...

javascriptjqueryhtmlsalesforcereduce

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

I am attempting to incorporate a bootstrap template into Angular. The template requires some external JavaScript and CSS files that need to be linked. I have placed these files in the assets folder and referenced them in the styles and scripts arrays of an ...

jquerycssangularbootstrap-4external-js

What is the best way to display all checked checkboxes even when the page is reloaded?

I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...

javascriptjqueryhtmlarrayscheckbox

Check if the data-indices of several div elements are in sequential order using a jQuery function

Is there a way to implement a function in jQuery-ui that checks the order of div elements with data-index when a submit button is pressed? I have set up a sortable feature using jQuery-ui, allowing users to rearrange the order of the divs. Here is an exam ...

javascriptjqueryhtmlcss

Adjust the size of a div element after updating its content using Mootools

I am currently utilizing mootools 1.2 on a basic webpage. There is a div that contains a form (referred to as formdiv) which is submitted through JS/ajax. Once the ajax request returns a "confirmation message" data, the formdiv updates accordingly. The is ...

cssajaxhtmlmootools

Chrome is where all the action happens, while Firefox prefers to keep things on the left

After a long break, I returned to designing my website and re-learning CSS. My approach involved creating a WordPress-integrated site with minimal HTML/PHP work, focusing more on utilizing the available CSS classes and IDs provided by a template theme (Bla ...

phphtmlcsswordpresscenter

By incorporating JavaScript, clicking on an image will trigger a shift in the position of a different element

Just starting out with JavaScript and experimenting with creating an event where clicking on an image triggers the movement of another hidden image. The hidden image is positioned off-screen to the left, while there is a table of images in the center of th ...

javascripthtmlcssimage

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

What is the best way to extract specific keys from a PHP JSON object?

I would like the PHP function to generate a list of keys where the value is equal to or less than a specified variable. <?php $t = 35; $jsonobj = '{"ABC":35,"DEF":36,"GEH":34}'; $obj = json_decode($jsonobj); ...

phphtmljsonajax