Thumbnails being centered

I am facing an issue where I am attempting to center a group of fluid thumbnails, but they are always aligning left instead of center. Can someone help me with this problem?

To better illustrate the problem, here's the JSFiddle link: http://jsfiddle.net/4040newb/bVa2Z/3/

If you check the output window and enlarge it, you will notice that the thumbnails should be displayed side by side, but they are not centered.

<div class="container-fluid">

  <div class="row-fluid">

        <ul class="thumbnails">
          <li>
            <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing">
              <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing">
            </a>
          </li>
          <!-- More list items -->
          
</ul>
</div>
</div>
htmlcsstwitter-bootstrapthumbnailscentering

Answer №1

To easily center elements, you can utilize the CSS properties display: inline-block and text-align: center:

.thumbnails { text-align: center; }
.thumbnails li { display: inline-block; margin: 0; float: none; }

An issue arose when Bootstrap introduced .thumbnails li { float: left }, disrupting the alignment. Adding float: none; as a workaround resolved the problem swiftly.

Check out the demo here: http://jsfiddle.net/shshaw/bVa2Z/9/show/

View the code here: http://jsfiddle.net/shshaw/bVa2Z/9/

Answer №2

Your list items are set as block elements, causing them to stretch the width of their container rather than appearing side by side.

To achieve the desired layout, apply the following CSS:

.thumbnails {text-align: center; }
.thumbnails li {display: inline-block; margin:0 }

To center align the items, use the provided CSS code in this fiddle.

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

Monochrome Effect Triggered by Cursor Hover

I'm attempting to use Javascript with HTML5 canvas to convert an image to greyscale, but I seem to be missing something in my code. Can anyone spot the error? I feel like I'm very close! function grayscaleConversion(str) { // Access the Canv ...

javascripthtmlcanvasgrayscale

Is it better to specify the image size in the height/width attributes of the img tag or in CSS settings?

What is the recommended coding practice for defining an image's size? <img src="images/academia_vs_business.png" width="740" height="382" alt="" /> Should the size be defined in the CSS style with width/height attributes instead? <img src= ...

htmlcssimage

Loading large content using jQuery's .html() method

After experimenting with the jQuery .html() function, I've noticed that it struggles to handle large amounts of text. You can see an example of this issue. Fortunately, a much simpler test case works perfectly fine. While I understand that including ...

javascriptjqueryhtmljsonload

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

javascriptjqueryhtmlcssslideshow

Is it possible to input text outside of a UL tag?

I am currently exploring the capabilities of framework7 and I have a question regarding placing an input type="text" outside the UL tag. Despite my attempts, the CSS styles are not being applied to the text input field. Any insights on this issue would be ...

javascripthtmlhtml-framework-7

Why do my buttons exhibit varying colors despite being assigned identical classes?

Creating a user-friendly interface for a news application, I designed six buttons, with two of them in blue (btn-primary) while all have the same classes. For the full code, click here https://codepen.io/tarekhassab/pen/Oojdgw?editors=1010 &l ...

twitter-bootstrapbootstrap-4

Is it possible to deactivate or replace flexslider using media queries?

In the process of developing a landing page, I encountered a challenge with displaying testimonials. On the desktop version, the 3 testimonials are arranged in 3 columns. However, for mobile and smaller screens, I needed to showcase them in a slideshow for ...

javascriptjqueryhtmlmedia-queriesflexslider

Two sets of buttons, however, one set is carrying out the incorrect function

I am trying to create two button sets that, when clicked, are supposed to angle the text below them at 45 degrees. However, I am facing an issue where both set 1 and set 2 only control the text linked to button 1. I need each button set to control their ...

javascriptcssbuttonrotationrotatetransform

Exclude certain labeled posts from appearing on the homepage of a Blogger website

I am managing a website dedicated to the best WhatsApp status on my blogger blog. I am in search of a way to conceal certain category posts from appearing on the homepage using coding techniques. Despite extensive research, I have been unsuccessful in fi ...

htmlblogger

Creating Space in CSS between Two Widgets

Is there a way to align the managers tab under the checkers and stockers areas on this page? The current setup has the manager button overlapping with both of them. If anyone has any suggestions on how to address this issue, I'm all ears. Thank you! ...

htmlcsstwitter-bootstrapbootstrap-4

What causes HTML/Django template to run code in a non-linear fashion?

I was puzzled by the behavior of this particular html template I learned in an online class. It seemed to be executing out of order: The python form class is called using Django's syntax {{form}} which injects blank fields for user input (name, email ...

pythonhtmldjango

Transform the appearance of a complex image by altering its color using CSS

In my quest to bring a unique functionality to life, I am looking to achieve the following: I want to layer two transparent images within a <div>: one representing an object and the other depicting a glowing effect around the object. When hovering ...

htmlcssimage

I can't find my unit test in the Test Explorer

I'm currently working on configuring a unit test in Typescript using tsUnit. To ensure that everything is set up correctly, I've created a simple test. However, whenever I try to run all tests in Test Explorer, no results are displayed! It appear ...

javascripthtmlunit-testingtypescript

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

htmlangulartypescriptfilterangular-material

Arrange two tables side by side horizontally using CSS styling

I'm new to CSS and looking for help on how to format a table to appear as two distinct tables side by side. I want the brown cells to be brown and the rest blue. https://i.sstatic.net/NrbsU.png Here is my attempt so far, but I'm struggling with ...

htmlcss

Adjust the Column Alignment Without Affecting the Entire Row or Table

My inquiry revolves around altering the sort direction of a particular column within a Telerik RadGrid. Utilizing Firebug, it is possible to identify and modify the sorting direction of a table (either master or detail). However, there seems to be no desig ...

c#asp.netcsstelerikradgrid

Achieving 10 touchdowns within a set of 5 plays during a football game

Receiving a page from an external site where I have no control. The table structure is as follows: <table><tbody> <!-- headers --> <tr><td></td> <td></td> <td></td> <td>< ...

javascriptjqueryhtml

Clear navigation bar alternative

My website features a transparent bootstrap navbar, with the hero header as the second element on the page set at a -50 margin to place it behind the menu, creating the desired effect. However, I have encountered an issue on certain pages where there is n ...

htmlcsstwitter-bootstrap

CSS3 can be used to gradually reveal an image beneath text by adjusting the

Can I achieve an animated background clip effect with CSS3? I have attempted to create an animation where the text changes to white while simultaneously revealing the background, but I haven't been successful. Is it possible to accomplish this using o ...

htmlcss

How can I trigger an Onclick event from an <a tag without text in a Javascript form using Selenium?

Here is my original source code: <a onclick="pd(event);" tabindex="0" issprite="true" data-ctl="Icon" style="overflow: hidden; background: transparent url("webwb/pygridicons_12892877635.png!!.png") no-repeat scroll 0px top; width: 16px; height: 16px ...

javascripthtmlseleniumonclick