What is the best way to horizontally align a floated image with its text positioned at the bottom?

I centered the images inside the "main-content" class, but I'm unsure if I did it correctly. Now, I also want to center the text, but using margin affects the images as well. Apologies for the messy code, I'm just a beginner.

Below is the HTML5 markup:

<main class="main-content">
          <div class="item">
            <a href="Products/groceries-pets/Fruits-Package.html">
              <img
                src="./Images/Products/groceries-pets/fruits-package.jpg"
                class="img-content"
              />
            </a>
            <br />
            <div>
              <p href="Products/groceries-pets/Fruits-Package.html" class="desc">
                <strong>Fruit Package</strong> <em> P1200 </em>
              </p>
            </div>
          </div>
    
          <div class="item">
            <a href="products/home-living/Indoor-Plant.html">
              <img
                src="./Images/products/home-living/indoor-plant.jpg"
                class="img-content"
              />
            </a>
            <br />
            <div>
              <p href="products/home-living/Indoor-Plant.html" class="desc">
                <strong>Indoor Plant</strong> <em> P300 </em>
              </p>
            </div>
          </div>
    
          <div class="item">
            <a href="Products/babies-toys/Baby-Cars.html">
              <img
                src="./Images/Products/babies-toys/baby-cars.jpg"
                class="img-content"
              />
            </a>
            <br />
            <div>
              <p href="Products/babies-toys/Baby-Cars.html" class="desc">
                <strong>Baby Cars</strong> <em> P150 </em>
              </p>
            </div>
          </div>
    
          <div class="item">
            <a href="Products/fashion/Black-Shirt.html">
              <img
                src="./Images/Products/fashion/black-shirt.jpg"
                class="img-content"
              />
            </a>
            <br />
            <div>
              <p href="Products/fashion/Black-Shirt.html" class="desc">
                <strong>Black Shirt</strong> <em> P400 </em>
              </p>
            </div>
          </div>
        </main>

Here is my CSS:

.main-content {
  background-color: rgb(219, 95, 95);
  height: 340px;
  width: 95%;
  margin: 140px auto 0;
  text-align: center;
}

.item {
  float: left;
}

.img-content {
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 30px -200px 0px 200px;
  object-fit: cover;
}

.desc {
  text-align: center;
}

Answer №1

Consider adjusting the styling of your elements to improve alignment. Remove the margin from .img-content and add it to .item instead:

.main-content {
  background-color: rgb(219, 95, 95);
  height: 340px;
  width: 95%;
  margin: 140px auto 0;
  text-align: center;
}

.item {
  float: left;
  margin: 20px;
}

.img-content {
  width: 200px;
  height: 200px;
  padding: 10px;
  object-fit: cover;
  background-color: green;
}

.desc {
  text-align: center;
}
<main class="main-content">
  <div class="item">
    <a href="Products/groceries-pets/Fruits-Package.html">
      <img src="./Images/Products/groceries-pets/fruits-package.jpg" class="img-content" />
    </a>
    <br />
    <div>
      <p href="Products/groceries-pets/Fruits-Package.html" class="desc">
        <strong>Fruit Package</strong> <em> P1200 </em>
      </p>
    </div>
  </div>

  <div class="item">
    <a href="products/home-living/Indoor-Plant.html">
      <img src="./Images/products/home-living/indoor-plant.jpg" class="img-content" />
    </a>
    <br />
    <div>
      <p href="products/home-living/Indoor-Plant.html" class="desc">
        <strong> Indoor Plant </strong> <em> P300 </em>
      </p>
    </div>
  </div>

  <div class="item">
    <a href="Products/babies-toys/Baby-Cars.html">
      <img src="./Images/Products/babies-toys/baby-cars.jpg" class="img-content" />
    </a>
    <br />
    <div>
      <p href="Products/babies-toys/Baby-Cars.html" class="desc">
        <strong> Baby Cars</strong> <em> P150 </em>
      </p>
    </div>
  </div>

  <div class="item">
    <a href="Products/fashion/Black-Shirt.html">
      <img src="./Images/Products/fashion/black-shirt.jpg" class="img-content" />
    </a>
    <br />
    <div>
      <p href="Products/fashion/Black-Shirt.html" class="desc">
        <strong> Black Shirt</strong> <em> P400 </em>
      </p>
    </div>
  </div>
</main>

Answer №2

One important Css property to note is the display property.

By utilizing this property, you can arrange your items in a horizontal manner.

To switch to a vertical layout, Simply include display: flex; and flex-direction: column; in your CSS.

Next, apply justify-content: center; and align-items: center; These properties will help center your items on the page.

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

Why is it that every time I write this code, the localhost gets redirected and a message pops up saying

<?php include("connect.php"); if(isset($_POST['submit'])) { $qonax=@$_POST['qonax']; $subject=@$_POST['subject']; $insert="INSERT INTO subject(ID,Qonax,Subject)VALUES('','$qonax', ...

Type Fury: A Multiplayer Gaming Hub for Speed Typists and Puzzle Solvers

Curious about creating a website that allows users to log in and participate in competitions against each other. Any tips on where to start or recommendations for existing frameworks would be greatly appreciated. Appreciate your help in advance! ...

Click the toggle ng-press attribute

I have a section with an on-click="..." action. The event slightly adjusts the section's appearance within the document so that it resembles a button. I am looking to switch between making this section clickable and non-clickable in my program. While ...

The data from my ajax code is not being successfully transmitted to the database

I'm having trouble using ajax to add data to the database. I'm not sure if the issue lies in the ajax code or the PHP code. Here is a snippet of my code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ ...

What is the best way to align a div of variable size in a container of variable size using CSS?

My website features a 3-level structure that consists of a "workingArea" and an "imageContainer" within it, containing an image. <div class="workingArea"> <div class="imageContainer"> <img class="theImage" /> </div> </div> ...

Display a button with an icon only when in responsive mode using HTML, CSS, and Materialize

Is there a way to hide the text on a button but keep the icon visible when viewing on a mobile device? For instance, if a button displays a face icon from MaterializeCSS along with the text "support", I would like to eliminate the text while still showing ...

Issues with the creation of an AngularJS table are causing functionality to malfunction

2021 UPDATE: Note: This question was drafted when I was still learning HTML and JS. If you are seeking assistance for an issue, this might not be very useful as my code was messy. Sorry for any inconvenience caused. The question will remain posted in acco ...

Tips for detecting if text appears in bold on a webpage using Selenium

I came across a pdf document with the following content: <div class=**"cs6C976429"** style="width:671px;height:18px;line-height:17px;margin-top:98px;margin-left:94px;position:absolute;text-align:left;vertical-align:top;"> <nobr ...

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

The value returned when using $.css('transform') is incorrect and displays as "rotate"

Possible Duplicate: Retrieve -moz-transform:rotate value using jQuery Firefox 15 - Chrome: $('#img2').css('transform'); return => "rotate(90deg)" Firefox 16 $('#img2').css('transform'); return => mat ...

Adjust the size of the Div and its content to fit the dimensions of

Currently, I have a div containing elements that are aligned perfectly. However, I need to scale this div to fit the viewport size. Using CSS scale is not an option as it does not support pixel values. https://i.stack.imgur.com/uThqx.png I am looking to ...

Arranging the placement of the dropdown menu

I am struggling with positioning the items in my dropdown menu. The functionality itself is working perfectly, but the issue arises when it comes to aligning the dropped down items. Initially, I positioned them based on a smaller screen size, but when view ...

Tips for utilizing socket.io for managing requests

Trying to implement socket.io for communication between an HTML page and an HTTP server, encountering the error message "Cannot POST / [HTTP/1.1 404 Not Found 1ms]". Below is the server-side code: var express = require('express'); var app = expr ...

Is it possible to show elements from an ngFor loop just once when dealing with a two-dimensional string array in a display?

I have an array of nested strings, and I am attempting to display the contents of each inner array in a table format. My goal is to have the first table show the values from the first index of each inner array and the second table to display the values fro ...

Tips on implementing ng-template within an Angular application

I'm in the process of developing a client-side angular application and have encountered an issue regarding the implementation of angular's ng-template. Currently, I have a navbar set up as follows: <nav class="navbar navbar-inverse" > ...

Animate the X position of a div's background image to create a scrolling effect

I'm seeking to achieve something similar to the example shown here: Unfortunately, it seems that it is not compatible with the latest versions of jQuery. ...

Delete items within the first 10 minutes of shutting it down

Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local stor ...

What is the method for generating a custom tag (similar to a class) within an option contained in a SELECT element?

I need to create a select box with two options: cars or boats. Here is my initial idea: <select> <option value="1" class="cars">Car1</option> <option value="2" class="boats">Boat1</option> <option value="3" class="ca ...

Is there a way to disable a JavaScript hover effect when the mouse moves away?

I came across this JavaScript code that swaps the background of a parent div when clicking on a link in a child div. However, I noticed that the hover state remains even after moving the mouse out of the link. Can someone help me modify the code so that ...