Tips on keeping these elements centered

I'm having trouble keeping these blocks of code centered. Can someone help me out? Here's the code snippet:


            main {
                width: 70%;
                float: left;
                clear: both;
                border-right: 1px solid #331a00;
            }
            main ul {
                margin-top: 1em;
                margin: auto;
                width: 100%;
                margin: auto;
            }
            .index {
                float: left;
                border: 3px solid #b88f61;
                margin-top: 1em;
                margin-right: 2em;
                list-style: none;
            }
            main ul {
                margin-left: 3em;
            }
            .index:hover {
                box-shadow: 1px 2px 3px 4px grey;
                border: 3px solid #331a00;
            }
            .index a div h3 {
                background-color: #331a00;
                padding: .5em;
                color: white;
                text-decoration: none;
                font-weight: bold;
                font-size: 100%;
                text-align: center;
                text-decoration: underline;
            }
            .index a {
                text-decoration: none;
            }
            .index a div img {
                width: 150px;
                height: 150px;
                margin-bottom: -5px;
            }
            #mobile_index {
                display: none;
            }
            #medusa {
                background-color: white;
            }
            #intro {
                width: 70%;
                margin: auto;
                margin-bottom: 4em;
                clear: both;
                font-size: 120%;
            }
            #intro h4 {
                text-align: center;
                padding: 1em 0;
                font-size: 150%;
            }
            #intro h1 a {
                text-decoration: none;
            }
            #intro h1 {
                text-align: center;
            }
            /*ASIDE*/
            aside figure {
                width: 100%;
            }
            aside {
                width: 24%;
                float: right;
                margin-top: 1.5em;
            }
            aside h3 {
                font-family: "Times New Roman", serif;
                font-size: 1.5em;
                font-weight: bolder;
                padding-bottom: .5em;
                text-align: center;
            }
            .popular {
                display: block;
                background-color: #331a00;
                color: white;
                padding: .5em;
                margin-bottom: .3em;
                margin-right: .1em;
                margin-left: 0;
                font-weight: bold;
            }
            aside figure figcaption {
                margin-bottom: 1em;
                width: 100%;
                background-color: #331a00;
                color: white;
                font-weight: bold;
                padding: .5em 0;
                font-size: 1.2vw;
            }
            form {
                width: 100%;
            }
            input[type="submit"] {
                margin: auto;
            }

The .index list items are currently aligned to the left within the main element. I've tried a few solutions but none seem to be working. Any advice?

htmlcss

Answer №1

  1. Adjust <ul> styling by removing padding and margin, and adding text-align:center;
  2. Update .index class by removing float:left; and adding display:inline-block;

main {
    width: 70%;
    float: left;
    clear: both;
    border-right: 1px solid #331a00;
}
main ul {
    margin-top: 1em;
    margin: auto;
    width: 100%;
    margin: auto;
}
.index {
    display: inline-block;
    border: 3px solid #b88f61;
    margin-top: 1em; 
    margin-right: 2em;
    list-style: none;
}
main ul {
    margin-left: 0;
    padding-left: 0;
    text-align: center;
}
.index:hover {
    box-shadow: 1px 2px 3px 4px grey;
    border: 3px solid #331a00;
}

/* Rest of the CSS code remains unchanged */


<main>
   <h1 id="page_title">The Compendium of Greek Mythology</h1>
   <ul>
      <li class="index">
         <a href="Compendium Gods.html">
            <div>
               <img src="images/The Gods.jpg" alt="Gods">
               <h3>Gods</h3>
            </div>
         </a>
      </li>
      <li class="index">
         <a href="#" alt="Heroes">
            <div>
               <img src="images/The Heroes.JPG">
               <h3>Heroes</h3>
            </div>
         </a>
      </li>
      <li class="index">
         <a href="#">
            <div>
               <img src="images/The Monsters.png" id="medusa" alt="Monsters">
               <h3>Beasts</h3>
            </div>
         </a>
      </li>
      <li class="index">
         <a href="#">
            <div>
               <img src="images/The Titans.jpg" alt="The_Titans">
               <h3>Titans</h3>
            </div>
         </a>
      </li>
      <li class="index">
         <a href="#">
            <div>
               <img src="images/The Titans.jpg" alt="The_Giants">
               <h3>Giants</h3>
            </div>
         </a>
      </li>
      <li class="index">
         <a href="#">
            <div>
               <img src="images/The Gods.jpg" alt="The_Giants">
               <h3>Nymphs</h3>
            </div>
         </a>
      </li>
      <li class="index">
         <a href="#">
            <div>
               <img src="images/The Gods.jpg" alt="The_Giants">
               <h3>Constellations</h3>
            </div>
         </a>
      </li>
   </ul>
</main>
<aside>
   <div>
      <form method="get" action="http://www.google.com/search">
         <h3>Search the Compendium</h3>
         <input type="search" name="q" size="" maxlength="" placeholder="Google Search">
         <input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
         <input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
         <input type="submit" name="search" value="Search">
      </form>
   </div>
   <div>
      <h3>Popular</h3>
      <p class="popular">Zeus</p>
      <p class="popular">Poseidon</p>
      <p class="popular">Hercules</p>
      <p class="popular">Dragon</p>
      <p class="popular">Cyclops</p>
      <p class="popular">Ares</p>
      <p class="popular">Kronos</p>
      <p class="popular">Perseus</p>
      <p class="popular">Giants</p>
      <p class="popular">Gaia</p>
      <p class="popular">Oranos</p>
   </div>
</aside>

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

Integrate a timepicker feature into a Bootstrap-4 table

I'm attempting to integrate a time picker into an HTML table using the JavaScript libraries bootstrap-4.min.js and moments-with-locales.min.js. Here is a link to my project, which includes an HTML table with an input for the time picker: https://jsfi ...

jquerycssbootstrap-4momentjsdatetimepicker

Adjust the position of an image to move it closer to the top using CSS

I have a fiddle where I am trying to adjust the position of an image (keyboard) to match a specific design. https://i.sstatic.net/flqCH.png In my fiddle, the keyboard image is slightly lower than the desired position shown in the design. I am looking for ...

javascripthtmlcsstwitter-bootstrap-4

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

jqueryhtmlcsstoggle

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

javascriptandroidhtmlandroid-intent

Interested in mastering BootStrap for Angularjs?

As a PHP developer with a newfound interest in JavaScript, I took it upon myself to learn AngularJS and jQuery. However, I recently discovered that simply mastering Angular is not enough - Bootstrap is also necessary. My only issue is my fear of CSS; handl ...

cssangularjstwitter-bootstrap

Attempting to utilize a Jquery Ajax post method to retrieve information from my specified URL and display it within my HTML Div element

Seeking assistance in fetching real-time data using a jQuery Ajax Post method. My experience lies mainly in SQL and C#, so coding in this language is relatively new to me. I was advised to use this script, which seemed straightforward. However, despite my ...

jqueryhtmlajaxasp.net-ajax

React Ant Design: Encountered a warning for 2 elements having non-unique properties

I have incorporated the Carousel component, with each one containing a different component. One contains a form, while the other includes an external library component called react-input-otp. https://codesandbox.io/s/pensive-einstein-uucvm?fontsize=14& ...

javascripthtmlreactjsantd

Tips for positioning and styling submenu on dropdown using CSS

I am facing an issue with my navigation menu in the design. The sub menu is not displaying when hovered. Is there a solution to fix this problem? Could it be due to missing CSS styles? nav ul {list-style-type: none; overflow: hidden; background: #000; p ...

htmlcss

What is the best way to display grouped items horizontally in an ASP.NET ListView?

My ASP ListView currently displays items vertically in columns with GroupItemCount set to 3: A D G B E H C F I Is there a way to adjust the display so that it groups items horizontally in rows like this? A B C D E F G H I This is the ListVi ...

.netasp.netcsslistviewhtml

Retrieve the text located within the span tag using Selenium

When I try to inspect the element using Google Chrome, I come across the following code: <div class="form-style-abc"> <fieldset> <legend><span class="number">*</span>Search Zone</legend> I am trying to retrieve ...

javahtmleclipseseleniumselenium-webdriver

The navbar-fixed-top class in Bootstrap seems to be malfunctioning

As I work on expanding my portfolio website using Bootstrap, I decided to incorporate the 'navbar-fixed-top' class to make the navigation bar stick to the top of the window. I found a helpful example of this feature here: https://getbootstrap.co ...

htmlcsstwitter-bootstrapbootstrap-4

Executing a post request asynchronously and storing the retrieved data into a variable

Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...

jqueryhtmlangularjsajax

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...

javascripthtmlcssreactjsnext.js

Customize your popover content with Bootstrap settings

I've been on a quest to dynamically update the content of a Bootstrap popover using JavaScript, but unfortunately, the methods I've tried so far haven't worked out as expected : <!--object with the popover--> <input id="popoverlist ...

javascriptjqueryhtmlcsstwitter-bootstrap

What might be the reason for the border not reaching the bottom of the popup in my chrome extension?

I am currently working on a Chrome extension and using Bootstrap 5 with Sass to style its popup. However, I have encountered an issue where the border of the popup does not extend to the bottom as expected. What could be causing this problem? popup.html & ...

htmlcssgoogle-chrome-extensionsass

What causes the navbar-brand to be hidden on Chrome mobile browsers?

I recently completed building my website at emdashr.com and have been adjusting the mobile views. However, I'm facing an issue where the navbar-brand disappears when viewing the site on mobile Chrome or desktop Chrome with a small viewport. Interestin ...

htmlcsstwitter-bootstrap

Getting hold of HTML elements in a div on a different page

Recently diving into the world of html/javascript, I find myself engaged in a project where I'm loading an external html page within a div. The loaded content looks like this: <div class="content" id="content"> <object ty ...

javascripthtmlelectron

The external javascript file is unable to recognize the HTML table rows that are dynamically inserted through an AJAX request

I have a situation where I'm pulling data from an SQL database and integrating it into my existing HTML table row. Here's the code snippet: Using Ajax to fetch data upon clicking analyze_submit: $(document).ready(function(e) { $('#anal ...

javascriptjqueryhtmlajax

Exporting MySQL data to MS Excel is functioning smoothly on the local environment, however, it is encountering difficulties when

<title>Orders Export</title> <body> <?php header('Content-Type: application/xls'); header('Content-Disposition: attachment; filename=download.xls'); $con = mysqli_connect('localhost','suresafe ...

phphtmlmysqlexcel

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Looking to add a unique touch to my React project with a shadow effect resembling an arch shape at the top of an image using Tailwind CSS. The ultimate goal is to create a semi-transparent arch-shaped shadow covering the top portion of the image, similar t ...

cssreactjsnext.jstailwind-css