positioning elements within a div in the center

I am facing an issue with centering the contents of a div

Despite trying various methods, I am unable to center the images.

The structure I have is as follows:

<div class="middleSlideContents">
    <div class='image'>
       <img>
    </div>
    <div class='image'>
       <img>
    </div>
    <div class='image'>
       <img>
    </div>
</div>

My objective is to align the contents of 

<div class='middleSlideContents'>
to the center, but I am struggling to identify the mistake in my approach.

The <div class='image'> elements are being generated dynamically and follow this structure.

You can find the rest of the code here: Fiddle Demo

Additionally, the middleSlideContents div is responsive, so its dimensions vary based on the screen size, which is not reflected in the demo.

I would appreciate any help or insights on whether the structure is incorrect or if I am making a mistake somewhere.

jquerycsshtmlalignment

Answer №1

To present the div.image elements in a horizontal center alignment, set their display property to inline-block. Then, use text-align-center on the parent element (.middleSlideContents) to horizontally align the div(s) elements:

.image {
    /* Other styles...  */
    display: inline-block;
}

.middleSlideContents {
    text-align: center;  /* <-- align the inline(-block) elements horizontally */
}

Check out the JSFiddle Demo for reference!

Update

If you need to vertically align the inline-block boxes, you can implement the approach outlined in this resource:

.image {
    /* Other styles...  */
    display: inline-block;
    vertical-align: middle;
}

.middleSlideContents:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

Take a look at the Working Demo for practical implementation.

Answer №2

Take out the float property and then insert 2 lines in your CSS like so: 

.middleSlideContents
{
    width: 86%;
    height: 100%;
    border-radius: 5px;
    float: left;
    margin-left: 7px;
    text-align:center; /*added */
}

.image
{
    /* height: 80%; */
    /* width: 16.2%; */
    border-radius: 5px;
    display:inline-block; /*added */
    margin-right:5px;
    border:1px solid;
}

see the working demonstration

UPDATE

To vertically center, utilize the table-cell

.middleSlideContents
{
    width: 86%;
    height: 100%;
    border-radius: 5px;
    float: left;
    margin-left: 7px;
    text-align:center;
    display:table; /* make parent div behave as a table */
    table-layout:fixed;
}

.image
{
    border-radius: 5px;
    display:inline-block;
    margin-right:5px;
    display:table-cell; /* make child as a table-cell*/
    vertical-align:middle; /*vertical middle align*/
}

view the demonstration here

Answer №3

Check out this example showcasing horizontal center alignment:

  • http://jsfiddle.net/jkkheni/7w8TC/21/

    .middleSlideContents
{
  width: 86%;
  height: 100%;
  border-radius: 5px;
  float: left;
  margin-left: 7px;
  text-align:center;
  display:table; 
 }

  .image
 {
     /* height: 80%; */
     /* width: 16.2%; */
     border-radius: 5px;
     margin-right:5px;
     display:table-cell;
     vertical-align: middle; 

 }
 .image img
 {   
   border:1px solid;
   cursor:pointer;
   width:150px;
   height:150px;

 }

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

The text entered in the textbox vanishes after I press the submit button

When a user selects a value in a textbox and clicks the submit button, the selected value disappears. <div class="panel-body" ng-repeat="patient in $ctrl.patient | filter:$ctrl.mrd"> <form> <div class="form-group"> ...

javascriptjqueryhtml

JQueryUI draggable multiple select containment

Hey everyone, I've managed to implement Jqueryui drag and drop along with Jqueryui selectable. One issue I'm facing is that when I select and move multiple objects, only the clicked element is contained within the parent while the others can move ...

javascriptjqueryjquery-ui

maintaining the alignment of one div's right boundary with another div's right boundary

---------------------- ----------------------------->edge X | | | | | logo | | dropdown menu ...

javascripthtmlcss

What is the best way to connect the imagemap shape with the checkbox?

I need assistance with synchronizing an imagemap collection of shapes and checkboxes. How can I ensure that clicking on a shape selects the corresponding checkbox, and vice versa? Imagemap: <div class="map_container"> <%= image_tag("maps/main ...

javascriptjqueryruby-on-rails

struggling with unexpected outcomes in jQuery

Having issues with jquery lib, can someone assist? Below is my HTML code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { ...

jquery

Ensuring scope safety in jQuery AJAX requests

My intuition suggests that if I am on a laggy server and the user triggers two events quickly enough, the value of c in the success function will be based on the most recent event, potentially causing func1 to use the incorrect value. This is merely a hypo ...

javascriptjquery

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

javascripthtmlasp.netloggingascx

Alignment of content layout across two wrapper elements

My goal is to achieve a specific layout where each pair of cards in a two-column layout is aligned based on the card with the largest content. Both cards share the same content layout and CSS. If you have any ideas or implementations that could help me ac ...

javascriptcssreactjssass

Adding the AJAX response to the specified element's ID

I'm having trouble inserting radio buttons into a <div> on my page using an AJAX response. The code I have looks like this: // AJAX form for updating tests after category selection $('#categories').change(function(){ category_id ...

javascripthtmljquery

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Utilizing regex patterns within Jqgrid

I am currently utilizing the JqGrid plugin (version 4.6.0 - jQuery Grid) to filter my results using specific fields. Here is an example of how the GUI appears: https://i.sstatic.net/BqGai.png With a large list of employees, I want the ability to filter t ...

javascriptjqueryregexjqgrid

Maintain Angular Dropdown Menu Open Across Page Refresh

I am currently working on an HTML/Typescript view that is connected to a SQL Database. Whenever there are changes made to the database, the entire webpage reloads. The issue we are facing is that we have dropdown menus on the page that clients want to rema ...

javascripthtmlsqlangulartypescript

Customize the select options of the jquery-image-dropdown plugin

I am aiming to dynamically remove the existing options in a select menu and replace them with a single new value. The select menu is constructed using the following plugin: Visit jquery-image-dropdown plugin webpage However, my jquery script seems to be ...

jquery

Is there something I'm overlooking in my image navigation? It doesn't seem to be interactive

Looking for assistance regarding the issue below. I can't seem to make my image clickable, and I'm not sure what's causing this problem. <img src= "makeup.html.jpg" alt= "Make up by Lauren Evans logo" title= "Make ...

htmlimagenavigationpixel

Showcasing PHP variables within HTML using jQuery

I am currently looking for the best way to showcase information stored in a PHP variable, retrieved from a MySQL database. My initial thought was to use jQuery. Here are my questions: When a user inputs a number into a field, I receive that Member' ...

javascriptphpjqueryhtmlmysql

The values within the select list are being sent as null

A JSP file was created with an HTML form, which upon submission redirects to a servlet. The form contains a multiple select list with pre-populated values. Within the servlet, there is an attempt to retrieve these values for modification. However, upon ...

javahtmljspservlets

What exactly does the term "library" refer to in the context of jQuery, a JavaScript

I'm confused about the concept of a library - when it comes to jQuery, can it be described as a large file containing multiple plugins that are pre-made and ready for use? ...

javascriptjquery

How to dynamically insert an image using the `<img src=”?”>` tag in ASP.NET C#

In my book database, I store information about each book including the name of the picture file I want to display. For example, cprog.jpeg My challenge is that when I try to append the image filename to the src attribute to display the picture, it only di ...

asp.nethtmlc#-4.0

Unable to place the div/ul above a preceding div

I am having trouble setting up a menu of tabs. I want it to move up so that it is positioned just above the previous div. However, every time I try to move it up, it ends up going underneath the previous div. I have attempted to change the z-index but with ...

htmlcsscss-position

Tips for customizing your MUI slider design

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

javascriptcssreactjsmaterial-ui