The carousel is having trouble aligning the images div to the center

Struggling to create a carousel slide that automatically resizes image, but can't seem to get the inner div containing the images to center within the outer div. Even after trying various CSS properties like text-align:center and margin-left: auto, the alignment remains elusive:

Below is the HTML code within my Django template, including inline CSS for testing purposes before transferring to a CSS file:

<div class="card">
        <div class="card-body" style="text-align: center;">
            <div id="carouselExampleIndicators3" class="carousel slide" data-ride="carousel" style="height: 100%; cursor: pointer; display: table-row; text-align: center; width: 100%;">
                <div style="display: table-cell; vertical-align: middle; width: 100%; border: 0px; text-align: center; height: 100%">
                <ol class="carousel-indicators">
                    {% for image in property.images %}
                    {% if forloop.counter0 == 0 %}
                    <li data-target="#carouselExampleIndicators3" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
                    {% else %}
                    <li data-target="#carouselExampleIndicators3" data-slide-to="{{ forloop.counter0 }}"></li>
                    {% endif %}
                    {% endfor %}
                </ol>
                <div class="carousel-inner">
                    {% for image in property.images %}
                    {% if forloop.counter0 == 0 %}
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="{{ image }}" style="width: auto !important; height: auto; max-height: 100%; display: inline">
                    </div>
                    {% else %}
                    <div class="carousel-item">
                        <img class="d-block w-100" src="{{ image }}" style="width: auto !important; height: auto; max-height: 100%;display: inline">
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators3" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators3" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                </div>
            </div>
        </div>
    </div>

After days of being stuck on this issue, any assistance or suggestions would be greatly appreciated!

htmlcssdjango-templatescarousel

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

How can I showcase the selected file using jQuery's querySelector?

I have successfully implemented a file upload feature using jQuery querySelector. Now, I am looking for a way to display the selected file name in a span element after the user selects the file. Here is my HTML code: <span id="filename"></span&g ...

javascriptjqueryhtmljquery-selectors

Button with small width containing an icon and text

I am trying to create a simple HTML button that has an icon on top and a description below it. <div class="mybtn"> <div><img src="someimage.png"></div> <div>Button description</div> </div> My question is, ...

htmlcss

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

javascripthtml

My Bootstrap/Flexbox layout is not behaving as anticipated. Can anyone identify any issues in my code?

I'm currently working on a MVC website that features a login/signup form. I have been trying to utilize bootstrap to format the forms. My main goal is to center the entire form on the screen, but so far I have only been successful in centering it on t ...

cssbootstrap-4flexbox

Is it possible for .php files that don't contain any PHP code to be sent to the interpreter?

Does the PHP interpreter process .php files on a standard LAMP stack even if they do not contain any PHP code? In essence, is there any performance or processing impact in having a .php file without any actual PHP code compared to simply making it an .htm ...

phphtmlperformance

using CSS to position elements that are generated dynamically

Hey there, I'm facing a little issue with my elements. These elements are being generated dynamically and I'd like to display them in a 4 column layout. The challenge is that they arrive separately and I can't simply wrap them in a div and u ...

css

How to make text transition between colors using CSS or jQuery

I'm looking to make a text blink with alternating colors: For instance: blinking a text with white, green, white, green, white, green I am open to either using jQuery or CSS. ...

jquerycssblink

Cannot POST to /profiles/flash/. GET request is also disallowed for /profiles/flash/

Here I am attempting to incorporate a follow toggle button in a Django template using Django and jQuery AJAX, but encountering an error. Method Not Allowed (POST): /profiles/flash/ Method Not Allowed: /profiles/flash/ I'm unsure where I might be goi ...

jquerydjangoajaxdjango-viewsdjango-templates

What is the appropriate semantic to apply to the members of a search result list?

I have an image that illustrates my goal: https://i.sstatic.net/xDLRA.png The "Search Results" Title is a h2 in terms of semantics. The "Search Result Title 2018" would be a h3. My query pertains to how the elements "Date & Time", "Fees", "Credit", an ...

htmlsemantic-markup

Javascript is not recognizing if and elseif conditions

I recently developed an IQ Test using JavaScript. I implemented specific conditions for different score ranges, however, the test only displays the IQ score based on the last condition, regardless of the number of correct answers. Despite numerous attempts ...

javascripthtmljqueryif-statementconditional-statements

Displaying the URL of a link on the screen using jQuery

I am looking for a solution to add a link address after the link itself in a table containing reference links for our staff. I have used CSS to achieve this in the past, but the address was not copyable by users. Instead, I am interested in using jQuery&ap ...

javascriptjqueryhtml

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

javascripthtmlcssreact-nativereact-navigation

Can you explain the significance of the "--" within CSS selectors?

My CSS skills are not the greatest and I stumbled upon a snippet of code that is puzzling to me. .grid-product__title.grid-product__title--body:hover { text-decoration: underline; } I checked MDN and it usually defines a reusable property, like a vari ...

htmlcsscss-selectors

Using jQuery, you can create and add an element to the page when a user clicks

Currently, my webpage contains numerous anchor tags that link to various video files, along with a single div element: <a href="http://www.example.com/example-1.mkv" class="video">1</a> <a href="http://www.example.com/example-2.mkv" class=" ...

javascriptjqueryhtml

Center navigation bar text with the class `.justify-content-center`:

Can someone explain why, when I add the class justify-content-center to my Navbar in Bootstrap, the text remains in the left position? https://i.sstatic.net/8x0Yc.png I came across an instruction in the Bootstrap documentation stating that after adding t ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Several treeviews for selecting data

I need some help with a specific assignment. The back end code is all set, but I'm struggling with the UI component. The task requires two tree views, one on the left and one on the right. The left tree view will contain states with multiple children, ...

javascripthtmlcsstreeviewhtml-lists

Positioning the div in the center

Having trouble centering a div inside a 100% wide container. Here is the HTML code: <div id="body-outside"> <div id="body-inside"> content </div> </div> And here is the CSS: #body-outside{ width:100%; flo ...

htmlcss

Organize the HTML output generated by a PHP array

There must be a simple solution to this, but for some reason, it's escaping me right now. I've created custom HTML/CSS/JS for a slider that fetches its content from an array structured like this: $slides = [ [ 'img' = ...

javascriptphpjqueryhtmlcss

Showing Variables in JavaScript

<!DOCTYPE HTML> <html> <body> <button onclick="question++">Increment</button> <script> function test() { var question = 0; } </script> </body> </html> Qu ...

javascripthtmlwebincrement

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: https ...

javascripthtmlvue.jssassquasar-framework