CSS loop to centrally align divs

I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: https://i.sstatic.net/RvnlX.jpg

When I try floating them left, they end up looking like this:

https://i.sstatic.net/PCImT.jpg

As you can see from the images, the elements are no longer contained within the panel when floated left. I'm attempting to have them appear centered and then shift to the left as the next element appears, like a combination of these two pictures. I've tried numerous approaches with CSS, but haven't been able to achieve the desired effect. The final version should resemble this layout:

https://i.sstatic.net/ib9j1.jpg

Any assistance would be greatly appreciated.

<p:panel header="DMS Folder" toggleable="true" toggleSpeed="500"
            style="margin-top:1%;padding-left:5%;padding-right:5%;margin-bottom:2%;"
            collapsed="false" styleClass="noBorder">
                <ui:repeat var="file" value="#{dms.files}">
                    <p:outputPanel
                        style="float:left;text-align:center;margin-right:30px;margin-bottom:2%;">
                        <p:graphicImage id="mimeType" value="#{file.file}"
                            title="#{file.fileEnd}" />
                        <br />
                        <p:outputLabel value="#{file.fileName}" style="font-size:10pt;" />
                    </p:outputPanel>
                </ui:repeat>
        </p:panel>

Answer №1

Consider wrapping your panel in a container with text-align: center;. If possible, apply it directly to the <p:panel>, as I am not sure of the elements it will render.

Instead of using float: left; on your divs, try using display: inline-block;.

Check out this example

Your code should resemble this structure:

<div style="text-align: center;">
    <p:panel header="DMS Folder" toggleable="true" toggleSpeed="500"
                style="margin-top:1%;padding-left:5%;padding-right:5%;margin-bottom:2%;"
                collapsed="false" styleClass="noBorder">
                    <ui:repeat var="file" value="#{dms.files}">
                        <p:outputPanel
                            style="display: inline-block;text-align:center;margin-right:30px;margin-bottom:2%;">
                            <p:graphicImage id="mimeType" value="#{file.file}"
                                title="#{file.fileEnd}" />
                            <br />
                            <p:outputLabel value="#{file.fileName}" style="font-size:10pt;" />
                        </p:outputPanel>
                    </ui:repeat>
            </p:panel>
</div>

Answer №2

If you want to center an item, consider using 'margin:auto' and for positioning items, try using 'display:flex'

Check out this link for an example

<html>

<head>
  <meta charset="utf-8">
</head>
<style>
  .center {
    margin: auto;
    display: flex;
  }
  .item {
    margin: 2px;
  }
</style>

<body>

  <div class="center" style="background-color:red;">
    <ui style="background-color:green; margin: auto;">
      <span class="item">item</span>
      <span class="item">item</span>
      <span class="item">item</span>
      <span class="item">item</span>
    </ui>
  </div>
</body>

</html>

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

Achieve a scrolling effect for just a specific section of an HTML page

Hey there! I'm currently working on adding scrolling text along the side of a webpage for a specific section. My goal is to have three different sections, each with text that stops scrolling when you reach it and then transitions to the next section o ...

Configuring a background logo in WordPress using the Redux framework

I am attempting to integrate a "Logo upload" theme option using Redux framework, but I encountered an issue due to the logo being set up through a stylesheet in my HTML template. How can I configure this logo using an uploader? As a newcomer to WordPress a ...

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

Is it more effective to implement react useState and conditional rendering for managing different screen sizes, or is it better to use

In my current project, I am using standard CSS3 and creating separate CSS files for each component. I am debating whether to incorporate an event listener with multiple return functions within my React component instead of having multiple media queries in ...

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

As a newcomer to Angular, I am trying to figure out how to properly save a new user with an avatar. Can someone help me understand how to pass the Blob value of the avatar to my user Model for successful saving? Below is the code snippet I am working with ...

Switch up the Thumbnail Image based on the selected category

While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

IE11 retains radio button selection even after page reload

I am facing an issue on my webpage where I have implemented radio buttons for filtering a list. ALL (default selected with checked='checked') MATCHED REST <input type="radio" value="ALL" name="options" class="radioStyle" checked autocompl ...

Creating a grid layout similar to Tumblr using HTML and CSS

Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, i ...

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the

I have been utilizing bootstrap.min.css from bootstrap v3.3.5 which I downloaded from http://getbootstrap.com and used it locally. However, I encountered an issue with glyphicons when running it on IE 9 and above. The glyphicon icon disappears on the first ...

Issue with .html causing .hover to malfunction

Attempting a basic image rollover using jQuery, I've encountered an issue with the code below: HTML: <div class="secondcircle" id="circleone"> <p> <img src="/../ex/img/group1.png"> </p> </div> JS: $("# ...

Glowing CSS animation surrounding a PNG image

.zuphologo { padding-top: 33%; padding-bottom: 2%; } .fx { box-shadow: 0px 0px 100px 4px #fff; animation: glow 1.5s linear infinite alternate; } @keyframes glow{ to { box-shadow: 0px 0px 30px 20px #fff; } } <div class="container"> ...

Tips for adding content to a textarea with JavaScript without disrupting the editing history

I have a specific requirement where I want the user to be able to highlight text in a textarea, then press ctrl + b to automatically surround that selected text with stars. Here is what I envision happening: 1) The initial content of the textarea is: "he ...

Looking for the location of a matching brace in a dataset?

As a newbie in the world of coding, I have embarked on learning about NodeJs file system module. Currently, my focus is on handling a large data file stored as a string. The challenge that I am facing is with locating the matching close brace and its pos ...

Why doesn't the date appear in the Textbox when the TextMode is set to "Date"?

Within my application, there are three textboxes named tbEditStartDate, tbEditStopDate, and tbEditRenewalDate. These textboxes are used to display the start date, stop date, and renewal date of applicants in a Gridview called gvApp. I have implemented a Ro ...

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

Tips for making a central CSS gradient

I am looking to create a background gradient similar to the one shown in the image (Load more news) and also add a border style. Any suggestions on how to achieve this would be greatly appreciated. ...

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...

Display and conceal elements within predetermined time intervals using jQuery, while ensuring that the final element remains visible

Is there a way to automatically hide div1 and show div2 after a set amount of time, let's say 10 seconds or 15 seconds? I came across this thread: Show and hide divs at a specific time interval using jQuery, However, the solution provided in the po ...

Implementing PHP code to prevent the submission of forms with invalid inputs

When working on a form validation process in PHP, I encountered a challenge in preventing the form from being submitted to the database when there are errors in the input fields. While I was able to display error messages for invalid inputs upon submitti ...