Tips for aligning the div and ul elements in the middle with CSS

How can I center a div and ul both vertically and horizontally in a mobile browser using CSS? I have tried to achieve this but without success.

For reference, here is the link:

Below is the CSS code:

.top-menuv2 ul{ list-style-type: none; margin: 10px 20px 0 960px; font-size: 0.80em; float: none; }
.top-menuv2 ul li{ display: inline; margin-right: 20px; font-family: 'Open Sans Bold', sans-serif; line-height: 1.8; }
.top-menuv2 a{ color: black; }
.top-menuv2 .top-navigation{ text-align: center; }
.top-menuv2 ul li > a:hover{ color: #555; text-decoration: underline; }
.top-menuv2 li:hover > ul{display: block; }
...

And here is the CSS for the mobile browser:

#header-text{ clear: both; display: block; margin: 0 2em 0 2em; }
#top-menu ul li{ margin: 0 10px 0 100px; }

Answer №1

One way to center elements horizontally is by using margin-right:auto and margin-left:auto. To center vertically, you can use vertical-align:middle.

Answer №2

If you want to center specific elements on a webpage, try these steps:

div.top-navigation.top-menuv2{
  text-align: center;
}

div#header-text{
  float: none;
  width: 232px;
  margin: 0 auto !important;
}

div.top-menuv2 > ul > li:last-child {
  margin-right: 0px;
}

https://i.sstatic.net/idB41.png

Answer №3

Here is the code snippet that worked for me:

<style>
                nav#mobile {
                    width: 100%;
                    margin: 0 auto;
                }
                ul li {
                    float: left;
                    /*padding-left: 3%;*/
                    list-style: none;
                    font-size: 0.6em;
                }
            </style>
            <nav id="mobile">
                <ul>
                    <li><a href="">Lorem.</a></li>
                    <li><a href="">Accusamus!</a></li>
                    <li><a href="">Dicta.</a></li>
                    <li><a href="">Nam!</a></li>
                    <li><a href="">Deserunt.</a></li>
                </ul>
            </nav>

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

Answer №4

If you want to perfectly center align an object both horizontally and vertically, you can use the following code snippet.

div#element {
    position: fixed;
    top: 50%;
    left: 50%;
    /* make sure to include necessary prefixes */
    transform: translate(-50%, -50%);
}

For more details and examples, check out this link.

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

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

Creating an inclusive h1 header with a logo: A step-by-step guide

Is there a way to have a logo linked to the homepage and also have an h1 element that is invisible? This is my current layout: <header id="pageHeader"> <h1> <a href="<?php bloginfo('url'); ?>"> & ...

"Clicking on an anchor tag triggers the appearance of the ngf-select popup as well

I attempted to create a file dropbox using the ngf-select feature. Within the div, I included an a tag for removing a file. However, whenever I click on the a tag, the ngf-select function also activates unexpectedly. See image here. ...

Arrange buttons and input fields within Dash in a cohesive layout

I'm currently developing a Dash application and I need to align two input fields and two buttons in two separate rows. I want the button 'Download ClinicalTrial.gov info' to be placed alongside the input 'Insert the filename for RCT inf ...

Exploring ways to style font families for individual options within ng-options

I am looking to display a combobox where each option has a different font. While using the ng-options directive in AngularJS to populate the options for a <select> tag, I am struggling to set the font-family for individual options. $scope.reportFon ...

What is the process for creating a tab logo?

Is there a way to create a personalized logo to appear next to the website title on the tab? Whenever I see a logo displayed beside the website title in my browser tabs, I can't help but wonder how it's done. ...

A step-by-step guide to setting up a Slick Slider JS slideshow with center mode

I am working on implementing a carousel using the amazing Slick Slider, which I have successfully used for images in the past without any issues. My goal is to create a 'center mode' slideshow similar to the example provided but with multiple div ...

What is the best way to utilize Django forms with a <select> value that is frequently used?

I am currently developing an application that enables users to interact with a database of information, including searching and saving entries. Within the search feature of the application, there are multiple fields where users should specify comparison o ...

How to Customize Bootstrap Colors Globally in Angular 4 Using Code

I am interested in developing a dynamic coloring system using Angular. I have set up a service with four predefined strings: success, info, warning, and danger, each assigned default color codes. My goal is to inject this service at the root of my applicat ...

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

update 3: After thorough debugging, I finally found the solution and it has been provided below. let values = { "sportsEntitties": [{ "sportsEntityId": 30085585, "sportsEntityName": "490349903434903490", "sportsEntityStartDate": "7878 ...

Missing value: Attempted to access properties of an undefined variable

I've been encountering an issue while trying to transfer data from one component to another using a service. The error message that I keep running into is: ERROR TypeError: Cannot read properties of undefined (reading 'statistics') at St ...

Tips for integrating a "datetime" picker in your AngularJS application

Currently working on an AngularJS application. The single page has a date input that needs to be added. Date Input <input type="date" ng-model="InputDate" /> Any suggestions on how to accomplish this task? ...

I require a breakdown of the JavaScript code, please

Are you struggling with a code snippet that involves CSS, JavaScript, and HTML? Let's take a look at the complete code: <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bo ...

Using JQuery and Bootstrap, add or remove rows dynamically

For my project, I am creating tests (in English, physics, etc.) using JSTL, Bootstrap, and jQuery. I need a form to create a Test with questions and answers. However, I am facing an issue. When I try to delete a question, the answers that were added are no ...

drawing tool with JavaScript and HTML5

Can you help me figure out why my sketchpad isn't working in Processing.js? I've checked my code and there are no errors, but the canvas is not showing up. Any suggestions? Take a look at the code below: function createSketchPad(processing) { ...

What is the best way to decrease the spacing between elements in an HTML document?

I'm trying to eliminate the space between a header and a table in my website, but I'm having trouble figuring out how to do it. Check out the screenshot where I've highlighted the issue. https://i.sstatic.net/pZLJi.png ul { list-style- ...

What is preventing me from binding ng-click to my element?

I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...

AngularJS having trouble navigating to a route with a hash from the login page

I am currently navigating through AngularJS for the first time and I have a navigation bar that allows me to either go to the login page or click on home to return to my homepage. On my homepage, there is a list of products and in the same navigation bar, ...

Menu Options for Websites

Is there a way to create a menu that can be easily linked and displayed on multiple pages within a website? I want to design a menu and have it accessible on index.htm, page2.htm, page3.htm, .. pageN.htm as if it is present individually on each page. In ...