Center two images with text on either side

Can anyone help me figure out how to achieve the layout shown in the image below? I've been experimenting with flexbox, floating elements, and various other techniques, but nothing seems to be working for me.

You can view an example of the desired outcome here.

Here is the code snippet I have been working on:


ul {
   list-style-type: none;
}

.inspiration-list-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -16px;
}

(inspiration-list-container li {
    width: 50%;
    padding: 0 8px 16px;
}

/* Remaining CSS code snippets here */

I am currently using Bootstrap and Flexbox to try and implement this design, but I seem to be at a standstill. Any assistance would be greatly appreciated. Thank you so much!

htmlcssbootstrap-4flexbox

Answer №1

https://i.sstatic.net/pLrH0.pngCheck out this code snippet:

html : 

<div class="flex-container">
  <div><div class="inspiration-description">
        <p>Success Story</p>
        <p>placeholder</p>
      </div>
  </div>
  <div><img src="https://images.ctfassets.net/inb32lme5009/4nojcxZUzehUfJ5JCGJpTQ/ab6b80302fa1c48d50c51b31d354517e/sephora_thumbnail_375x667.png"></div>
  <div><img src="https://images.ctfassets.net/inb32lme5009/4nojcxZUzehUfJ5JCGJpTQ/ab6b80302fa1c48d50c51b31d354517e/sephora_thumbnail_375x667.png"></div>  
  <div>
     <div class="inspiration-description">
        <p>Success Story</p>
        <p>placeholder</p>
      </div>
  </div> 
</div>

css : 

.flex-container {
  display: flex;
  flex-wrap: nowrap; 
  align-items:center;
}

.flex-container > div { 
  width: 400;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.flex-container > div > img{
  vertical-align:middle
}

.inspiration-description p {
    font-family: Avenir Bold,Helvetica Neue,Helvetica,sans-serif;
    font-size: .875rem;
    display: inline-block;
  vertical-align: middle;
  line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.5; 
   }

Fiddle : https://jsfiddle.net/aviboy2006/6rqLax8v/19/

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

A duo of adjacent buttons styled with HTML, CSS, and Bootstrap

I'm encountering an issue with the layout of my design. On my product page, I have two buttons placed on top of each other because one is within a form (refer to the image). https://i.sstatic.net/cS9TI.jpg I would like to position the two buttons s ...

htmlcsstwitter-bootstrapbootstrap-4

Adjusting arrow rotation based on select box activation using CSS

After completing the design aspect of creating a custom select box using CSS, I encountered some difficulties while attempting to add the "before" and "active" options. The goal was for the "arrow" and "menu" to change when the select box is active. Howeve ...

htmlcss

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

htmlcss

What is causing the position-sticky feature in Bootstrap 5 to not function properly?

My attempt at creating responsive card ads with Bootstrap 5 has hit a snag. The sticky-top feature doesn't seem to work properly on the left card. Specifically, I'm aiming to have a sticky sidebar on the left, containing a menu within a grid col ...

htmlbootstrap-5

Arrange a table in HTML based on the item's identification number

I am working with an HTML table that fetches data stored locally. Currently, it searches through the model in a foreach loop and displays the information in two columns (Patient Name & SiteID). However, I want to find a way to organize the information by ...

htmlasp.netrazor

Create a dynamic JavaScript animation with frames

Is there a simpler method to animate a sprite with just 4 frames in HTML Canvas? Having a background in AS3 and C#, I found the code below to be overly complicated. It seems like I'll be spending hours trying to decipher it. Is there a more modern or ...

javascripthtmlcanvas

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

htmlcssangularjstwitter-bootstrapdatepicker

Instructions on adding a solid border color to a circular div using CSS

Hey there! I'm curious, is it possible to style a straight border color on a rounded div using CSS? Here I have some basic Tailwind CSS code. <div class="rounded-2xl w-72 h-20 border-l-4 border-l-yellow-500"> ... </div> In the ...

css

Collapsible Rows in Material-UI Table seamlessly integrated with regular rows

While using material-ui v4, I encountered an issue where my collapsible row columns are not aligning properly with my regular columns. Below is a photo and the code snippet for reference. As you can see in the image, when I expand the Frozen Yogurt row, th ...

cssreactjsmaterial-ui

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?

I have inserted a large image onto my HTML page and to manage its size, I am displaying it within a div that allows for scrolling like a map. Using jQuery, I have placed 3 markers on the image. The issue I am facing is that when I scroll the image, the ma ...

javascriptjqueryhtmlcss

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

Positioning the div to align perfectly alongside the list items

My current objective involves dynamically creating div elements and populating them with items. A working demo of my progress can be found by following this link. The issue at hand is that the newly created div does not appear in the desired location, but ...

javascriptjqueryhtmlcss

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

javascripthtmlangulartypescript

Can you please share the updated method for defining the traditional `inline-block` display setting?

Recently, CSS has undergone a change where the display property is now split into an inner display and outer display. With the legacy value of display: inline-block, it raises the question of what the newer equivalent should be. One might assume that the ...

css

Two separate tables displaying unique AJAX JSON response datasets

As a beginner in javascript, I am facing a challenge. I want to fetch JSON responses from 2 separate AJAX requests and create 2 different tables. Currently, I have successfully achieved this for one JSON response and table. In my HTML, I have the followi ...

javascriptjqueryhtmljsonajax

The CSS animation spills out of the div container

I am encountering an issue with my code where the borders are not displaying as expected. The screen is divided into 8 equal parts, each of which should have a ripple effect. While everything works well in Chrome, Mozilla, Opera, and Safari, the ripple eff ...

javascriptjqueryhtmlcss

Ways to conceal text while still allowing it to be read by a screen reader

I am looking for a way to have a text updated by an action without displaying it on the webpage, but still have it announced by screen readers. I tried using display: none and visibility: hidden, however, these properties seem to not be accessible by scr ...

htmlcssaccessibilitywai-aria

Display multiple values in a select dropdown using Bootstrap 5 properties

I am stuck with the following code<hr> HTML <select id="select" placeholder="Choose Select" class="selectpicker" multiple></select> <div class="container"> <div id="all" clas ...

javascripthtmlbootstrap-5bootstrap-selectbootstrap-selectpicker

Is it possible to disable other options when a checkbox is checked, but enable them all when unchecked using

I am trying to create a group of checkbox buttons where if one is checked, the others should be disabled. When the checked checkbox is unchecked, all checkboxes should be enabled. However, my current code is experiencing issues where all checkboxes become ...

javascripthtmlcheckbox

Issue with error handling while using HTML5 geolocation in Chrome browser

I have a basic map that is supposed to load centered on the user's current location if they allow HTML5 geolocation. There is a fallback function in place for users who choose not to share their location, but it seems to be malfunctioning. Here is th ...

javascripthtmlgoogle-mapsgoogle-maps-api-3