How to easily make a table in the center of the page using

I have a collection of 20 icons that I would like to arrange in a centered horizontal line of images. However, I am looking for a responsive solution and cannot use an HTML table. It needs to be mobile-friendly and wrap properly for small screens. If I were to use an HTML table, I would need to create 1 row with 20 columns, but this would not work well for smaller devices.

One solution I have tried involves creating a group of divs. The layout appears fine. http://jsfiddle.net/mayJ6/

<div style="display: inline-block; border: solid 1px black;">
    <a href="http://www.example.com" target="_blank" >
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/157940_262105851352_1630693163_q.jpg"
           width="50" height="50" alt="photo"/>
    </a>
</div>

However, this answer advises against using display: inline-block in this scenario. Are there any better solutions that offer a similar visual result, perhaps using Twitter Bootstrap or another framework?

htmlcsstwitter-bootstrap

Answer №1

In my opinion, using display: inline-block works perfectly well in this scenario.

The previous answer you mentioned discusses the main layout, particularly when dealing with multiple columns and the desire to align them next to each other, where using floats would be more appropriate.

To achieve a similar outcome with floats, you would need to enclose the images/icons within a container and specify a fixed width or padding to center them. This method still allows for responsive design if you utilize percentage-based widths, as demonstrated in my example here: http://jsfiddle.net/E9pS9/

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

Conceal the vacant area located at the top of the page

By clicking on the "Run code Snippet" button or visiting this link, you may notice a significant amount of empty space at the beginning of the page. The images only become visible once you start scrolling down. I am looking for a solution to hide this emp ...

javascripthtmlcss

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

pythonhtmlcssbootstrap-4web-development-server

Tips for generating a JSON string with nested structure

Can someone assist me in generating a JSON based on the HTML elements provided below? { "AppName": "ERP", "ModuleDesc": [ { "Name": "Payroll", "AcCESSRIGHTS": [ { "Create": "Y", "Retrive": "Y", "U ...

javascriptjqueryhtml

Saving functions in the localStorage API of HTML5: A step-by-step guide

I have encountered an issue while trying to store an array in local storage using JSON.stringify. The array contains functions (referred to as promises) within an object, but it seems that when I convert the array to a string, the functions are removed. Su ...

javascriptjsonhtml

Show or hide a div based on the visibility of another div in Angular using *ngIf

Looking for a way to dynamically display images based on the visibility of another image? Consider the code snippet below: <div *ngFor="let badge of user.progress.unlockedBadges"> <img id="{{i}}_unlockedImage" *ngIf="badge == achievemen ...

htmlangular

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

javascripthtmlarraysangularjsangularjs-directive

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

cssangularsassmaterial-uiangular-material

JavaScript: selecting multiple elements with identical attributes

I'm struggling to target all a tags with the 'data-caption' attribute. I attempted to do this by: first selecting all the a tags let links = document.querySelectorAll('a'); and then trying to access their attributes links.get ...

javascripthtmlloopsgetattribute

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

cssangularjscss-transitionstwitter-bootstrap-3

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

When designing my html form, I encountered an issue where I needed to display a message beneath blank fields when users did not fill them out. Initially, I used empty spans in the html code to hold potential error messages, which worked well. However, I de ...

javascripthtml

Unable to connect HTML data to the view section using angular.js

I am trying to incorporate some HTML content into my view using angular.js. time.html: <table class="table table-bordered table-striped table-hover" id="dataTable"> <tr> <td width="100" align="center">Time <i class="fa fa-long- ...

javascripthtmlangularjs

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

javascriptjquerycssajax

How to Create a Bootstrap 4 Footer that is Perfectly Centered

Struggling to grasp Bootstrap 4 specifically, I am focusing on learning how to center my footer, which consists of 2 rows. Despite my efforts, I can't seem to get the entire footer centered properly. Below is the current HTML code I am working with: ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

I'm facing an issue with a link in the horizontal navigation bar. When a user hovers over it, I want another div to slide down just below it. The problem is that using the .toggle method doesn't work as expected. It continuously toggles the div e ...

jquerycss

Prevent the propagation of a particular CSS class's inheritance

I need to make modifications to an existing HTML5 app that features two unique themes. Here's an example of the current structure: <body class="theme1 theme2"> <div id="div1">I'm satisfied with both themes</div> <di ...

javascripthtmlcss

Hide multiple divs with similar ids in JQuery when clicking outside of them

Is there a way to hide all div elements with similar id if none of them are clicked on? Currently, my code only works for the first div because I am using index[0] to retrieve the id. How can I make it work for all ids? Below is the code snippet: $(win ...

javascriptjqueryhtmlcss

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

jqueryhtmlbuttoncheckboxscroll