Centering Images Using CSS Floats

I've got this HTML code featuring images and titles:

<div class="container">
<div class="box"><a href="#" class="catname"><img src="image1.jpg" class="thumb"><p>Title 1</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image2.jpg" class="thumb"><p>Title 2</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image3.jpg" class="thumb"><p>Title 3</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image4.jpg" class="thumb"><p>Title 4</p></a></div>
...
<div class="box"><a href="#" class="catname"><img src="image49.jpg" class="thumb"><p>Title</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image50.jpg" class="thumb"><p>Title</p></a></div>
</div>

And here is the CSS code:

.container {
    width:80%;
    margin: 0 auto;
}

.box {
    display:inline-block;
    width:150px;
    margin-right:5px;
    float:left;
}

When I use this code, there seems to be excess white space on the right side. How can I center these images for different browser sizes without setting a specific width for the container?

Is there a CSS solution for this issue?

htmlcss

Answer №1

Ensure your container has the style text-align: center; and eliminate the float:left; property from the box class.

Answer №2

Behold, the marvel of a perfectly centered, widthless float!

#container {
  /* Behold the magic of centering! */
  width: 400px;
  border: 1px solid black;
  overflow: hidden;
}
.centered {
  position: relative;
  float: left;
  left: 50%;
  height: 100px;
  padding-bottom: 10px;
  clear: left;
}
.centered div {
  position: relative;
  float: left;
  left: -50%;
}
<div id="container">
  <div class="centered">
    <div>
      <img src="http://placehold.it/200x100" alt="" />
    </div>
  </div>

  <div class="centered">
    <div>
      <img src="http://placehold.it/300x100" alt="" />
    </div>
  </div>

  <div class="centered">
    <div>
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
    </div>
  </div>
</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

Omit the tag from the submission section

Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...

jqueryhtmlcsstagssubmit

Efficiently handling jumbled strings in Python: A guide to parsing

Looking to pull out ID numbers and their pass/fail status from an XML file, the data I have is messy and I'm new to Python. Specifically, I have a list of strings with the info and need to extract the codes and status. Currently, I'm struggling w ...

pythonhtmlstringlistbeautifulsoup

I successfully corrected the selectable options list in HTML/CSS and am now working on linking it to a Django char field. I'm currently facing some difficulties in figuring out

Below is a Django form field I have defined: source_currency = forms.CharField(max_length=5) Here is an example of Select/Option HTML: <select name="fancySelect" for="{{ form.source_currency.id_for_label }}" class="makeMeFancy" id="drop1"> ...

pythonhtmldjango

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

htmlcssbootstrap-5

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

javascripthtmljquerycss

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Something strange is happening - as I shorten the height of the browser, elements on the page start to overlap. I've tried using Firebug to troubleshoot, but haven't had any luck so far. Maybe someone here can help me out! EDIT: It seems that e ...

htmlcssresponsive-design

Currently at the beginning stages of mastering CSS and encountering difficulties with the display property

I am facing an issue with my code .name-bar, .email-bar { border-color: gray; border-style: solid; display: inline-block; } .email-bar { margin-top: 5px; } .div-one, .div-two { border-color: gray; border-style: solid; width: 200px; h ...

htmlcssdisplay

What is the best way to ensure that two div elements within a list element fully utilize the available width on a webpage?

I am looking to create a 'settings' div that adjusts its width based on the available space on a page. This could range from 1000px to 600px, and I want the div to always be next to the 'title' div without wrapping onto the next line. F ...

htmlcsswidthhtml-lists

Modify the location of the input using jQuery

Hey there, I've got this snippet of HTML code: <div class='moves'> <div class='element'><input type='text' value='55' /></div> <input class='top' type='text&apo ...

javascriptjqueryhtmlcss

Having trouble transmitting parameters through ajax

I have been attempting to use ajax to send variables to a php page and then display them in a div, but unfortunately, it's not functioning as expected. Below is the HTML code: <div id="center"> <form> ...

javascripthtmlajax

Unusual scroll bar movements when using jQuery validation

When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even t ...

c#javascriptasp.netcssjquery-validate

Ways to ensure a <div> element adjusts its height based on inner content dimensions

When using buttons in a chatbot that have text which changes based on selected options, I've encountered an issue where the text length sometimes exceeds the button's space. I'm looking for a way to make the containing div automatically adj ...

cssbootstrap-4flexboxvue-componentvuejs3

The video link was not found during the page scraping process

I'm trying to download a video from the page below: After inspecting with Firebug, I found the video url, <video src="https://09-lvl3-pdl.vimeocdn.com/01/1449/2/57246728/138634997.mp4?expires=1457996449&amp;token=089e435c20e7781d36fce" preloa ...

pythonhtmlseleniumvideoweb-scraping

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

javascripthtmlcss

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

the box is having trouble with its animation

This issue revolves around the use of CSS3 properties like -webkit-keyframes and -webkit-box-align. To learn more about this problem, please check out http://codepen.io/pleasureswx123/pen/fljFH /* sample css code */ <style> .box { di ...

cssanimation

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

javascripthtmlcss

Issues with CSS not being applied when the page content exceeds the viewport

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Unique Title</title> <style> #div1 { posit ...

htmlcss

Ways to streamline repetitive CSS rules within media queries

As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...

cssmedia-queries