Centering Text in CSS and HTML

Today I am pondering over how to align text horizontally on my website. The layout of us.mineplex.com's forums, shop, and title is perfectly aligned in a horizontal manner. I have tried to figure it out on my own but need some help. Thank you.

CSS:

.header_container{
width: 100%;
height: 185px;
background-color: black;

}

.navtabscontainer{

    background-color:   #6ED16E;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border: solid;
    border-color: blue;
    position: relative;
    top: 180px;
    height: 75px;
    text-align: center;
    list-style: none;



}

.headerlogo{

    background-image: url('logo.png');


}

.divider{

    height: 49;
    width: 3px;
    background-color: white;
    position: absolute;
    left: 109px;
    top: -16px;


}

.navtabs{

color: white;
text-decoration: none; 
font-size: 20px;
position: absolute;
left: 50px;
top: 30px;
list-style-type: none;
text-align: center; 


}

* {
margin: 0;


}

.textip{


    border: solid;
    border-color: blue;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color: red;
    font-size: 20px;
    position: absolute; 
    right: 300px;
    top: 100px;



}

HTML:

<html>
<head><title>Minetage</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

   <div class="header_container">
    <h3 class="textip">Server IP: Minetage.com</h3>
    <div class="header_logo">
    <div class="navtabscontainer">
            <ul class="navtabs">
                <li href="Games">Games</i>
                <li class="divider"></li>
                <li href="Games">Forums</i>
                <li class="divider"></li>
                <li href="Games">Home</i>
                <li class="divider"></li>
                <li href="Games">Leaderboards</i>
                <li class="divider"></li>
                <li href="Games">Contact</li>
            </ul>




</body>
</html>

Answer №1

To display your list in a line, you can use the following CSS:

.navtabs li {
    display:inline;
}

By doing this, there is no need for empty list items to act as dividers.

If you want to add spacing between the items, you can include left/right padding or margins to the anchor element (especially if it's a menu).

<ul class="navtabs">
    <li><a href="myPage.htm">Games</a></i>
    <li><a href="myOtherPage.htm">Stuff</a></i>
</ul>

then

ul.navtabs li a   {
    display:block;
    padding: 0 2em;
}

By setting display:inline; for the list item and then display:block; for the anchor inside, you can style the link without requiring 'display:inline-block', which may cause compatibility problems with older versions of IE.

It's important to note that 'href' is an attribute for anchors (<a>), not list items (<li>). Clicking on a <li> with an href attribute will not perform any action.

Answer №2

If you want to show the list in a line, try using this code:

.navtabs li {
    display:inline-block;
}

Answer №3

The issue you're facing is that li elements are automatically set to display: block;, causing them to take up the full width of their parent element.

To resolve this, apply the style display: inline-block to all li tags.
Here's an example on jsfiddle

Answer №4

Include the following code in your CSS file

.navtabs li
{
    float:left;
    display:inline-block;
   padding-left:5px;
}

By setting float:left, the li element will be floated to the left display:inline-block; Learn more about Display properties.

Check out this Fiddle

Output:

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 viewing on mobile devices, the hover effect in responsive web design

While working on a responsive website, I encountered some challenges. I have a Div containing an image and some information. When a user hovers over this div, the background changes and 3 buttons appear. However, the issue arises when using a mobile devi ...

Issue with React/Next.js input field rejecting commas

I'm experiencing a problem with an input field in my React application that was developed using Next.js. The issue arises specifically when using an iPad device, where the input field behaves inconsistently when dealing with commas. When using deskto ...

Tips on how to change the color scheme of a webpage

I am currently working with basic HTML and CSS, but I am facing an issue where my background color is only filling a third of the page instead of the entire page. Despite attempting to use the html and body classes for the background color, it did not prod ...

How can I fix the issue with Parallax scrolling not functioning properly? (Using Next.js Image + Tailwind)

What am I missing to get parallax scrolling to work? <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e86 ...

Two challenges I encountered with my CSS dropdown menu bar

I've been working on a CSS top dropdown navigation bar, but I'm encountering two issues that I can't seem to resolve. The first problem is that my nav div either extends too far down or my 1px right border tabs aren't reaching the botto ...

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

Tips for avoiding an automatic slide up in a CSS menu

Is there a way to disable the automatic slide-up effect on my CSS menu when clicking a list item? I have tried using stop().slideup() function in my JavaScript code, but it doesn't seem to work. Additionally, I would like to highlight the selected lis ...

Should I convert to an image or utilize the canvas?

I'm debating whether it's more efficient to convert a canvas drawing into an image before inserting it into the DOM, or if it's better to simply add the canvas itself. My method involves utilizing canvas to generate the image. ...

What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level: h1 { font-size: 1.8em; margin-top: ...

Acquire dynamically loaded HTML content using Ajax within a WebView on an Android

I have been attempting to extract the content of a web page on an Android platform. Despite trying JSoup, I faced a limitation with ajax support. As an alternative, I am endeavoring to embed the URL within a hidden web view and retrieve the HTML in the on ...

Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout ...

JavaScript: selecting multiple elements with identical attributes

I'm struggling to target all a tags with the 'data-caption' attribute. I attempted to do this by: first selecting all the a tags let links = document.querySelectorAll('a'); and then trying to access their attributes links.get ...

Tips for resizing a Shiny Dashboard to accommodate various screens

I created a shiny app with a specific layout on my desktop computer that fits perfectly on the screen. However, when I run the app on my notebook, only the top left boxes are visible, making the app too large for the screen. Even after resizing with Ctrl ...

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Looking at the screenshot, you can see variable names such as "email_address", "email_message" and "email_subject". I would like these to be displayed as "Email", "Message" and "Subject" instead. The validation in this form is done using MM_validateForm() ...

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

Check to see if the ContentEditable div is currently focused

I'm struggling to determine if a contenteditable div has focus with my current code. Here is what I have so far: if ($("#journal-content:focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } The issue I'm encounter ...

Converting HTML Content into Json Data

When trying to update the content area on my website without refreshing the entire page, I encountered difficulties in pulling data from a JSON file. Despite attempts at using AJAX and conducting research on JSON and AJAX techniques, I was unable to succes ...

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Currently, I am utilizing a plugin that embeds all CSS within the final HTML file. This method prevents the application from refreshing in development mode. Whenever I make edits to the CSS, the build process completes normally, but the styles do not updat ...