What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Currently, I am developing an application that showcases the 9 newest photos with a specific tag. To ensure consistency in image sizes, I have set each photo to be 240px wide and 200px tall.

My query now is how can I vertically center these images so they appear in the middle of the screen's width? I am aiming for a responsive design where the images always stay centered regardless of the device's width.

In my HTML setup:

<div id="results" class="row"></div>

I have tried numerous solutions found online without success. It's important to note that there are 9 photos displayed which users will need to scroll through. Any solution involving position: absolute; would not be suitable in this case.

The photos are fetched using the Flickr API and then appended to div#results using:

$("#results").append('<div class="miniature col-xs-12 col-sm-4 col-md-4 col-lg-4"><a href="'+myresult_size.url+'" target="_blank"><img src="'+myresult_size.source+'" ></a></div>');

Despite using Bootstrap's grid system, I have faced challenges in centering the images.

jqueryhtmlcsstwitter-bootstrap

Answer №1

give this a shot 

<div id="results" class="row text-center"></div>

alternatively, you can also try

#results{
  margin: 0 auto;
  }

Answer №2

If you have a cell that is 4-wide, make sure to apply the offset class col-sm-offset-4. When using col-sm-4, it will automatically be inherited by wider viewports, such as col-md-4 and col-lg-4. Additionally, don't forget to add the text-center class to center the content of the cell when it's wider than its child image.

The final code should look like this:

$("#results").append('<div class="miniaturka col-xs-12 col-sm-4  col-sm-offset-4 text-center">
    <a href="'+myresult_size.url+'" target="_blank">
       <img src="'+myresult_size.source+'" >
     </a>
    </div>');

Here is an example snippet for demonstration:

img {
  display: block;
  margin: 0 auto;
  max-width: 240px;
  max-height: 200px;
  height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="miniaturka col-xs-12 col-sm-4 col-sm-offset-4 text-center">
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/300/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/400/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
  </div>
</div>

Answer №3

When the parent element has text-align center, all inline child elements will be centered.

.thumbnail {
  width: 100vw;
  text-align: center;
}
<div id="results" class="row">
  <div class="thumbnail col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <a href="#" target="_blank">
      <img src="http://placehold.it/350x150">
    </a>
  </div>
  <div class="thumbnail col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <a href="#" target="_blank">
      <img src="http://placehold.it/350x150">
    </a>
  </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

What is the proper way to select the <ul> element within an FTL template?

Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...

javascriptcssfreemarker

Is the form being submitted with the href attribute?

Does this code ensure security? <form id="form-id"> <input type='text' name='name'> <input type='submit' value='Go' name='Go'/></form> <a href="#" onclick="docume ...

javascripthtml

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

javascriptjqueryhtmlcsswordpress

Having trouble with the page layout in AngularJS

I am currently delving into Angular JS in order to fulfill some academic requirements. The issue I am facing is with the rendering of a landing page after successfully logging in through a login portal that caters to three types of users. Strange enough, w ...

javascriptjqueryangularjs

Unattaching Events in AngularJS

I'm still navigating my way through the realms of Angular and MVC programming, uncertain if I'm on the right track. There's a jQuery snippet that I wish to implement in some of my partials, but not all. With event listeners that persist eve ...

javascriptjqueryangularjsevents

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

Strategies for Preserving Added Field Data Using JQuery

I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle. My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking ...

jqueryhtmldatabasetheory

The website's favicon is mysteriously absent, particularly noticeable when using Google Chrome on my WordPress site

I recently added a favicon to my wordpress website, but for some reason it's not appearing on Chrome. If anyone could lend me a hand, I would greatly appreciate it! Any assistance would be wonderful, thank you! ...

htmlwordpresswordpress-theming

Using jQuery to adjust the length of a string to fit within a specific width

I am working with a table and need to input strings in each cell, but they are wider than the cell width. I want to shorten the strings without breaking lines, and add '...' at the end to show that the string is long. The table consists of aroun ...

javascriptjquerystring

Incorporate a caret into an element using CSS styling

issue I encountered an issue where <textarea> and Javascript had some quirks when trying to transfer the value into a <pre> tag. My aim was to implement a blinking caret in the <pre> as if I were pressing F7. The reason behind not using ...

htmlcsscaret

Steps for comparing two inputs and displaying a div:1. Obtain the values of

I am looking to create a basic JavaScript function that will show or hide an element based on whether two input values match. This needs to happen before the form is submitted. <form> <input type="number" name="some1" id="some1"> <input t ...

javascriptjquery

Stop jquery and/or x-editable from automatically converting strings into objects

I am facing an issue where I want to display a JSON string using x-editable, but it is converting it into an object against my wishes. This results in [object Object] being displayed instead of the actual string. How can I prevent this from happening? var ...

javascriptjqueryjsonx-editable

Run the document.ready function following an AJAX post request

In my custom.js file, I have multiple elements with click and other methods attached to them. All of this is enclosed within document.ready(). Everything functions as expected, but when I make an AJAX post, document.ready() doesn't get triggered again ...

jqueryajaxruby-on-rails-3postdocument-ready

Ways to avoid divs overlapping on a mobile device?

If you visit this page: The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue? ...

htmlcss

Kendo React UI DataTable Filter providing a consistent experience similar to the JQuery Kendo UI

When using Kendo React, the grid's filter appears as a line below the header by default, as shown in the following image: https://i.sstatic.net/1CgIi.png However, in the JQuery version, the filter is presented as a button that triggers a modal windo ...

jqueryreactjskendo-uikendo-gridkendo-react-ui

Having trouble with your GitHub Pages site displaying properly on desktop but working fine on mobile?

I am facing an issue with my GitHub pages site on a custom domain. It works perfectly fine on mobile, but when I try to access the same URL from desktop, I encounter a DNS_PROBE_FINISHED_NXDOMAIN error. Any suggestions on why this might be happening? You c ...

htmlcssgithubgithub-pages

Text box is not automatically filling up when selecting from dropdown menu

I am currently facing an issue with a dropdown box that offers three different selections. I want the Group ID associated with the selected group to automatically populate in the textbox below. How can I achieve this functionality? Whenever I make a selec ...

javascriptphphtmlsql-serverdrop-down-menu

Performing an asynchronous HTTP request using AJAX and jQuery's post or get methods

Currently embarking on the creation of a PHP, MySQL, AJAX, and JQuery-powered calendar. While my expertise in the latter two technologies is lacking, I am eager to expand my knowledge. I stumbled upon a script that fulfills my basic requirements, but I hav ...

jqueryajax

Integrate predictive text suggestions in JavaServer Pages for efficient form filling

After some research, I have managed to solve the issue I was facing. On my jsp page, I have three text boxes. When I enter data into the first text box, it triggers a call to get.jsp to fetch data from the database and populate the second text box. However ...

javajavascriptjqueryajaxjsp