What is a better method for aligning an image in the middle of a floated container?

Is there a better way to center an image within a floated div without using an extra p tag? I currently have the image inside a p tag and center the p, but it annoys me having that extra tag. Any suggestions on how to center the image itself? Thanks! Below is my current code. Edit: The centering needs to be both vertical and horizontal!

HTML

<div class="filler"><p><img src="images/qualGraphic.png" width="578px" height="256.72px" alt="Quality"/></p></div>

CSS

.filler {
    display:table;
    width:65.6%;
    height:300px;
    background-color:#000;
    display: table;
    float:left;
}
.filler p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Answer №1

To achieve both horizontal and vertical centering for an image, you can use the following CSS:

img {
  display: block;
  position: absolute;
  margin: auto;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}

The parent element containing the image should be positioned relatively, like this:

position: relative

For a practical example, you can refer to this code snippet with an image inside a floated element:

http://jsfiddle.net/xYEuS/

Answer №2

To center the image within the .filler class, simply apply the CSS property text-align:center. Images are considered inline elements, so they will be centered based on the text-align property.

Example in JS Fiddle: http://jsfiddle.net/DhE7K/

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

Place one flex item in the center and align another item to the bottom

I am attempting to center one flex item both vertically and horizontally. At the same time, I want some text to remain fixed at the bottom of the flex container. When I use margin-top:auto on the text, it just moves the inner box to the top. Any suggesti ...

Preventing the cascading effects of past hovers with AngularJS

I am working with AngularJS and have the following HTML code snippet. <div class="row" style="margin-left:60px; text-align:center;"> <div class="col-xs-1 " style="margin-left:25px;width:10px; " ng-repeat="image_thumb_id in image_thumbnail_ ...

Modify the div's visibility based on selected option in the dropdown menu

In my PHP file, I have the following codes: <section id="placeOrder"> <h2>Place order</h2> Your details Customer Type: <select name="customerType"> <option value="">Customer Type?</option> <option value="ret ...

Is it possible to create rounded or curved top corners for a box using HTML?

I'm looking to create a card with rounded top corners and wondering if there is a way to achieve this. Currently, here is the code I have: <div id="card1"> <div id="card1i"></div> </div& ...

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

Modifying Stroke color in HTML5 Canvas

I am attempting to create a unique visual effect by drawing a circle resembling a clock using canvas 2d context. The idea is to initially draw the circle in black starting at point p1, and then when I complete a full circle tour it should erase as the colo ...

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

Verifying that phone numbers and email addresses are accurate prior to submitting the form

As a PHP newcomer, I apologize if my question appears somewhat naive. Currently, I am working on a contact form that is functioning well, but I need to implement validation for two specific fields: the phone number and the email address. For the phone numb ...

The variable in the HTML input value is not fully visible when filling out the HTML form

I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...

Determine the number of input files in HTML5 when there is a change

I am working on a project that requires using the HTML5 File API to determine the number of files selected in an input file element and then displaying this count in another element. Here is the HTML code: <div class="form-row"> <label>Ma ...

Improved AJAX Dependency

A few days ago, a question was posted with messy code and other issues due to my lack of experience (please forgive the form handling as well). However, I have made some improvements and added context. The main problem now lies in the second AJAX call. Ch ...

The hamburger symbol (&#9776;) appears as a dull shade on Android screens

Imagine a basic website design featuring a gray background with white text. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> </head> <body style="background: gray; color: white; font-size:50px;" > The t ...

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

Tips for aligning text in the middle of a customizable and adjustable button with the use of only Bootstrap 4

I am encountering an issue with button text alignment. After customizing the width and height of a button, I noticed that its text does not remain centered on certain screen sizes while in debugging mode. Html <!doctype html> <html lang="en> ...

Having some trouble integrating CSS with JavaFx; encountering an error

Can anyone help me with using CSS in JavaFx? I'm encountering an error while trying to add a CSS file (style.css) to my fxml file through stylesheets. The error message I'm getting is: com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged W ...

Highlighting of Vue directives in HTML within WebStorm

Can the Vue attributes and directives be highlighted? Including those in quotes. https://i.sstatic.net/NOGn7.jpg ...

Stop Bootstrap 4 from automatically wrapping columns to the next row

I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended ...

Chrome is experiencing a rendering problem as a result of using @Font-Face

Having trouble with rendering in my Angular 4 application, similar to the issue outlined in this post about Angular 2 Chrome DOM rendering problems. Despite there being a solution provided in that post, I am still facing difficulties when navigating betwee ...