Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally?

Here is the code that I am currently working with:

<div id="container">
    <ul id="list1">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
    <ul id="list2">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
</div>

I attempted using the "left: 50%" and then "right: 50%" CSS technique but it did not work as expected.

#container { position: relative; left: 50%; }
#container ul { float: left; position: relative; right: 50%; }

Any suggestions on how to achieve this layout?

htmlcsshtml-listscentering

Answer №1

Maybe this could work: text-align: center; combined with display: inline-block;:

#container {
    ...
    text-align: center;
}

#list1, #list2 {
    ...
    display: inline-block;
}

Check out the Demo here: http://jsfiddle.net/N6RUM/

Answer №2

For achieving the layout, consider implementing table and table-cell:

Check out this Fiddle for reference

#list1 { position: relative;  width: 50%;  display: table-cell; background-color: green;}
#list2 { position: relative;  width: 50%;  display: table-cell; background-color: red;}
#container{
    display: table;
    width: 100%;
    text-align: center;
}

li{
    list-style-type: none;
}

Answer №3

What about this example? Code Playground

#wrapper { 
    display: flex; 
    justify-content: center; 
}
#wrapper ul { 
    list-style-type: none; 
}

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

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

My chat box consists of two frames... The first frame displays all the usernames, while the second frame shows the full chat when a user is clicked from the first frame. I need to reload the second frame every time to check for new messages from the send ...

jqueryajaxhtmljsp

Experience the seamless transition of new CSS animations

I designed a basic HTML game where a moving box disappears when clicked on. However, the animation that follows does not originate from the click location but rather from the original position. I believe the remove @keyframes at 0% should be based on the ...

javascripthtmlcsscss-animations

Vue.js enhances user input interactions

CSS <span :style="{ display : displayTitle }" @click="toggleInput()"> {{ text }} </span> <input v-if="isEditing" type="text" v-model="text" @blur="hideInput" @keydown.enter="saveChanges" @keydown.esc="cancelE ...

javascripthtmlvue.jsinputfocus

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Seeking a Javascript expert, In my custom templates, I have used a link as shown below: <a href='http://www.allbloggertricks.com'>Blogging Tips</a> I would like the page to redirect to example.com if the anchor text is changed from ...

javascriptjqueryhtmlredirect

Using WebDriver Selenium to choose an element within a table following another element

The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...

cssseleniumxpathselenium-webdriver

Show various forms that gather information

Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...

phpjavascripthtmlmysql

Why is a question mark added to the URL when the login button is clicked

I've encountered an issue where clicking this code for the first time redirects me to localhost:8080//? instead of localhost:8080//admin.html. Any idea why this is happening? $("#admin-login").click(function(){ var data = {"username": $("#admin ...

javascripthtmlajax

Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

My goal is to create an attractive splash page with diagonal, circular links that are all the same size. The <p>'s will function as the links, but I'm struggling to figure out how to make them all diagonal and uniform in size. I've ex ...

htmlcssflexbox

Bootstrap allows for word wrapping on either one or three lines

I am currently utilizing Bootstrap 3 for my website, and I have a sentence composed of three parts at a certain point on the page. For example, it might read "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill." T ...

htmlcsstwitter-bootstrap

Is the Pure CSS hide/show technique using radio buttons causing a challenge with parent and descendant elements?

Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...

htmlcsscss-selectorsshow-hide

Generate a JSON (Jquery) structured table matrix outlining various roles and corresponding permissions such as read, write, delete, and write special

I would like to create a table matrix that displays roles and permissions (read, write, delete, write special) using jQuery with JSON data. The table should contain checkboxes for each permission type, and the checkboxes for read, write, delete, and write ...

javascriptjqueryhtmljson

Designing a hierarchical HTML dropdown menu for choosing an XML file for parsing using a jQuery script

I have successfully created a question and answer framework using Jquery and XML files. Users can choose a specific category of questions from a drop-down menu, which then displays the corresponding questions and answers from the selected XML file. While ...

jqueryhtml

Customizing Material-UI elements in React using CSS styling

My goal is to style all the <Chip> elements within a <Grid> that has the class .table-header, but they are not changing their style (I have a <p> that should be colored in red and it works). Why does the styling work for the <p> ele ...

cssreactjsmaterial-uitsx

single-use date availability checker

I'm currently facing an issue with my code. It seems to be functioning correctly, but only for the first iteration. Let me explain further. If I select a date and time that is already in the database, it correctly displays "date unavailable". Likewis ...

c#htmlasp.netms-access

CSS: The calc() function does not take into account the bottom padding when used in Firefox and Internet

I am encountering an issue with the calc() function in Firefox 32 and IE 11, where the bottom padding of a div is not being respected. However, this problem does not occur in Chrome and Opera. The main content section should have a fixed height while allo ...

htmlcss

Fetch HTML content from a local file using Vue

I am currently searching for a method to import HTML content from a file located at /src/activities/0/2/content.html The specific numbers in the path are interchangeable variables. My goal is to achieve something along the lines of mounted(){ this ...

htmlvue.jswebpackvuejs2vue-cli

I am looking to adjust/modulate my x-axis labels in c3 js

(I'm specifically using c3.js, but I also added d3.js tags) I have been working on creating a graph that displays data for each month based on user clicks. However, I am facing an issue where the x-axis labels show 0-X instead of 1-X. For instance, ...

javascripthtmld3.jsc3.js

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

cssdrop-down-menugradient

What is the best way to create a box-shadow with an inset effect and a touch of

Looking to dive into the world of css3 design and wondering how to achieve a box-shadow inset with a touch of transparency. Check out the example in this fiddle link: http://jsfiddle.net/TeGkt/4/ Any ideas on how to replicate this effect without relying ...

htmlcss

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

javascripthtmlcss