Adjust the image's alignment to the center within the <li> tag

Welcome to my website! Visit to learn more.

I am looking to center align the banner on the homepage. Here's a snippet of my HTML:

<div id="contentmain">
    <div class="bannerarea">
      <div class="slideShow">
        <ul class="slides" style="height: 908px; width: 1071px; overflow: hidden; display: block;">

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner1" src="images/logo48201140259.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner2" src="images/logo48201140327.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner3" src="images/logo48201140346.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner4" src="images/logo48201140411.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide selected" style="position: absolute; display: list-item;"><img alt="Banner5" src="images/logo48201140501.jpg" style="margin-left: auto; margin-right: auto;"></li>

        </ul>
      </div>
        <script type="text/javascript">
            $(document).ready(function() {
                // simplest example
                $('.slideShow').slideShow({
                    interval: 20,
                    repeat: false
                });
            });
        </script>        
    </div>
  </div>

The images loaded here are dynamic and may vary in size, so I need help aligning them to the center regardless of their width. Any suggestions would be greatly appreciated!

Thank you.

htmlcss

Answer №1

To center align the <li> elements, add a specific width and then apply text-align:center. Keep in mind that <img> elements are inline, so there's no need to use margin:auto; for center alignment.

<li class="slide" style="position: absolute; display: none; width: 1071px; text-align:center;">

Consider moving all the styles to an external CSS file for better organization ;)

Answer №2

You have specified a fixed width of 1071px for the ul.slides element. It appears that you are attempting to center the images using margin:auto; (which is correct), so if you adjust the width of your ul.slides to match the width of the largest image (1227px), you should achieve the desired outcome.

On a separate note, I suggest reducing the size of those images as they are not only large in file size (kb) but also excessively wide.

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

Is Angular ViewChild behaving oddly?

@import '../../main-styles.scss'; .note-card-container { position: relative; background: white; border-radius: 5px; box-shadow: 0px 2px 15px 2px rgba(black, 0.068); transition: box-shadow 0.2s ease-out; margin-top: 35px; &:hover ...

htmlangulartypescriptviewchild

The PHP code embedded within the HTML document and triggered by an AJAX request failed to

Here is an example of my ajax call: function insertModal(link) { $.ajax({ url: link, cache: false, dataType: "text", success: function(data) { $("#modalInput").html(data); }, error: function (request, status, error) { ...

javascriptphphtmlajax

Images fail to appear on Github pages

Check out my GitHub page at You can also view the repository here: https://github.com/chryspenalber/hercules I'm encountering an issue where the images inserted through CSS are not showing up on the GitHub page, although they display fine on localho ...

htmlcssgithub-pages

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

javascriptcssangularjsng-animate

"Customizing the topbar of Twitter Bootstrap for right-to

Attempting to implement twitter bootstrap for a top navigation bar on my master page. http://jsfiddle.net/ZqCah/1/ Encountering some issues and seeking assistance: 1- Desiring to switch the direction of all content to right-to-left (rtl). This would me ...

htmlcsstwitter-bootstrap

php redirecting form data

Being a beginner in PHP, I'm aiming to create a script that can direct me to a specific address based on the value of an input form. Is this the right approach? index.html <form action="process.php" method="post"> <input type="text" nam ...

phphtmlforms

Categorize an array by their names using Jquery and present them as a list

I have a list of cities and their corresponding countries structured like the following: { "data": [ { "cityname": "Newyork", "countryname": "USA" }, { "cityname": "amsterdam", "countryname": "Netherland" },{ "cityname": "Washington", "country ...

javascriptjqueryhtmlarraysgrouping

What factors determine the height of a table cell?

My forehead is now a grid of indents after battling with HTML tables for days, leaving marks resembling my keyboard. Speaking of grids, I'm curious if there are any clear guidelines on the sizing of <td>. Does it depend solely on content? Is i ...

htmlcssrenderinghtml-table

Div slicing with CSS

Is it possible to slice a div from either side, for example, taking a portion of the left side and making it transparent while keeping everything else in place? For instance, if there is a div named "box" with CSS styling: #box { width:100px; heig ...

css

The art of selecting elements and attaching event listeners in a React environment

Currently, I am working on my portfolio website using Gatsby. The layout includes a sidebar on the left with navigational links (Home, About, Work, etc.), and the main content is displayed as one long strip of sections on the right. When a user clicks on a ...

javascriptcssreactjsevent-listener

What is the best way to ensure the footer is always positioned at the bottom of each page

Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at ...

htmlcssprinting

Circular Graphical Representation using CSS3 styling

Check out my latest creation - a donut chart: http://jsfiddle.net/4azpfk3r/217/ I'm trying to customize the appearance of the donut chart. Is there a way to give it a red outline and have the filled score/percentage in solid red, while leaving a tran ...

csssvg

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

javascripthtmlcss

Effortlessly Display or Conceal Numerous Table Columns Using jQuery

I have a small table where I want to hide certain details with a basic button... for instance, table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 5px 10px; } <button>Show/Hide Details</button> <table> ...

javascriptjqueryhtml

Issue with applying style to programmatically inserted Button in JQueryMobile

Is there a way to reapply jQueryMobile's css to a button that is inserted programmatically inside a ListView? When I hard-code the button, the styling applies correctly, but when adding it dynamically, the style is lost. For reference, this is the co ...

csslistviewbuttonjquery-mobile

Is the div not occupying the full width and height due to the presence of invisible scrollbars?

My attempts to make the selected child, its parent, and html/body all have a height/width of 100% with padding right/bottom 0 seem unsuccessful. These mysterious bottom and right bars pop up once a month and it's so irritating. They are identical in ...

htmlcssfrontend

Every time I insert the SVG logo onto the bootstrap navbar, the formatting mysteriously alters

I'm facing an issue with my svg logo on the navbar - half of it is formatted correctly while the other half is not. Additionally, there is a discrepancy in how it appears on Safari and Chrome. I exported this svg file from Adobe Illustrator and incorp ...

htmlcsssvgbootstrap-4

Adjust the button's hue upon clicking it

The current function is operational. Upon pressing the button, it toggles between displaying "click me" and "click me again". However, I desire the button to appear blue when showing "click me" and red when displaying "click me again". <!DOCTYPE html ...

javascripthtmlcss

Creating a gradient border that rotates 360 degrees on mouse hover

.brand-img::after { content: ''; position: relative; background-image: url('https://i.sstatic.net/Y2vyB.png'); background-repeat: no-repeat; float: left; margin-left: 15px; transition: all 1.8s ease; width: 135px; height: 135px ...

javascriptjquerycsshtml

Retrieving input field value in HTML through a button press

Feeling stuck trying to incorporate an input field value into an ajax call? Here's the code I have so far for a button and input field combination, but I can't seem to get it working. function submit() { $.ajax({ type: 'POST&apo ...

javascriptjqueryhtml