Aligning div elements in the center alongside one another

I have a code where the image height is larger than the containing div, which is intentional. However, I am facing an issue where the text div at the bottom of the image is not positioned correctly. Is there a solution to this problem? I also attempted using margin-bottom on feature_details.

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
}

.feature_display__img {
  width: 100%;
  height: auto;
}
<div class="feature_section__feature_left">
      <div class="feature_details">
        <h3 class="feature_name">Reviews that truly matter</h3>
        <div class="feature_info">
          <p>
            Insolvers allows for easy creation of rich, high-quality content with its built-in editor.
          </p>
          <p>
            You can add images, gifs, and media - craft, experiment, and collaborate with your colleagues before scheduling.
          </p>
        </div>
      </div>
      <div class="feature_display">
        <div class="feature_display__img">
          <img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
        </div>
      </div>
    </div>

htmlcss

Answer №1

For your image container, make sure to include the CSS property vertical-align: middle;.

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
}

.feature_display__img {
  width: 100%;
  height: auto;
}
<div class="feature_section__feature_left">
  <div class="feature_details">
    <h3 class="feature_name">Reviews that really matter</h3>
    <div class="feature_info">
      <p>
        Insolvers makes it easy to create rich, high-quality content using the inbuilt editor.
      </p>
      <p>
        Add images, gifs, and media - draft, experiment, and share with your peers before scheduling.
      </p>
    </div>
  </div>
  <div class="feature_display">
    <div class="feature_display__img">
      <img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
    </div>
  </div>
</div>

Answer №2

Revamp Your CSS Style with These Updates

.feature_section__feature_left{
      display: grid;
      grid-template-columns: repeat(2,minmax(50%,50%));
      align-items: center;
    }
    .feature_details {
  display: inline-block;
  /* width: 40%; */
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  /* width: 50%; */
}

.feature_display__img {
  width: 100%;
  height: auto;
}

Answer №3

One way to adjust the details div is by using relative positioning to move it upwards.

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
  position: relative;
  bottom: 5rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
}

.feature_display__img {
  width: 100%;
  height: auto;
}

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

Experimenting with creating collapsible panels using Bootstrap/CSS can result in various outcomes

, I am in the process of constructing a collapsible sliding left panel using bootstrap 5. The progress has been notable, but I am encountering some hurdles. Upon reviewing the code at this link: https://jsfiddle.net/dizzy0ny/86wjas9L/108/, you will witness ...

htmlcssbootstrap-4highchartsbootstrap-5

Having difficulty creating a simple HTML menu, where one button is visible but the other is unresponsive despite having identical CSS styling

Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it ...

htmlcss

Is it possible to utilize an if statement to select a specific Bootstrap modal?

How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...

javascriptphphtml

PHP child categories causing jQuery menu loading issue

Our custom jQuery menu has been functioning perfectly on our OpenCart store. However, we are facing an issue where the 2nd level child categories are not being displayed. It seems that there is an error in the PHP code for both the modified and original me ...

javascriptphpjquerycssopencart

Generating a unique JavaScript array by extracting data from an HTML input element

I am working on a basic HTML form that requests a number between 1 and 10 from the user. Depending on this number, I aim to generate a new array. Currently, the code displays an alert box with the newly created array, but my end goal is to have a table p ...

javascripthtmlarraysfunction

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss

What's the best way to send keystrokes to a dynamically generated input field within a parent div element when it is clicked on?

I need help with this issue: our website features a dynamic table that loads data (students' grades) into a div element. When the div is clicked, a new child element input is added to the div, allowing us to input a new grade using the SendKeys method ...

c#htmlseleniumexception

Using PHPMailer to send an HTML page via email

I am attempting to email this HTML page using unlayer.com. I have tried using $mail->isHtml(true), ... msgHtml... but the email client keeps showing the code instead of the HTML page. Any suggestions on how to fix this? Here is my code: $sql = "SE ...

phphtmlemailphpmailer

What is the best way to add an insert button to every row?

Take a look at the image provided. When I click on any register button, the last row is being inserted instead of the desired row. What I'm aiming for is this: when I click register, the entire selected row should be stored in a separate table. Whe ...

javascriptphphtmlmysqli

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Looking to create a PDF of an HTML element with background color and images. Seeking a solution, either client-side or server-side using Django/Python. Tried jsPDF on the client side, but it does not support CSS. Considering ReportLab for Django, but uns ...

javascriptpythoncssdjangopdf-generation

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

javascriptjqueryhtmlcss

What is the process of incorporating a select form within a component?

I am currently working on creating a user registration form. Once the form is filled out and the submit button is clicked, I need the values from the form to be displayed in a specific <p id="data></p> component. Can anyone assist me with this ...

javascripthtmlselect

Issue with Bootstrap CSS: some elements are not properly contained within the body tag

After integrating Bootstrap Sass into a Rails project, I embarked on revamping its homepage. However, I encountered an issue with the background style applied to the <body> element - it only affected the portion of the page visible upon initial loadi ...

htmlcsstwitter-bootstrapsass

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

javascriptcssjsonangularjsdata-binding

Tips on adjusting the color of a link once it has been clicked?

Looking for a link with a specific style? a { color: #999; &:hover { color: #008da0; } &:visited { color: #999; } /* I added this to test if it's gonna fix it, but it didn't */ } Upon clicking the link, it turns blue and remains s ...

htmlcss

Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes ...

javascriptjqueryhtmlcssgallery

Making sure that the anchor elements within a list are taking up all available space by setting them to display:block and adjusting their height/width

Looking at the example below, I want the anchor elements to take up all of the available space within their parent list items: http://jsfiddle.net/nmxmT/ I can't figure out what I did wrong :( ...

htmlcss

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

javascriptcssfacebookfacebook-comments

Execute removeClass() before the html() method is called

I have a variable that contains two classes. I need to remove the class small before the content is added to the DOM. Currently, the div is being displayed with the small class, but I want it removed. I attempted to rearrange the removeClass method befor ...

javascriptjqueryhtml

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

javascriptjqueryhtmlcss