What is an alternative method to vertically center text without relying on display: table-cell?

I'm attempting to center the menu on a 30px line, but I'm facing an issue where it remains at the top unless I use display: table-cell.

What am I doing incorrectly?

Here is the style sheet file:

.menu
{
    width: 600; 
    height: 30px; 
    border: 1px solid black; 
    margin: 0px auto; 
    text-align: center; 
    vertical-align: bottom
}

The menu code in my HTML file looks like this:

<div class="space"></div>
<div class="menu">
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
    <a href="index.html">Home</a> 
</div>
<div class="space"></div>
htmlcss

Answer №1

When setting the line-height to 100px, it adjusts the height of your menu line. However, make sure to leave enough space horizontally to avoid a cluttered appearance. Consider using <code>min-width
, width, or overflow-x rules.

div.menu
{
    width: 600px; 
    /* Instead of specifying height, use line-height */
    line-height: 30px;
    border: 1px solid black; 
    margin: 0px auto;
    text-align: center;
}

div.menu a {
    vertical-align: middle;
}

Answer №2

To resolve the problem, adjusting the line-height to the desired value may offer a temporary fix, but this approach is merely a workaround. The proper solution involves utilizing the vertical-align property (specifically for all anchor elements within the menu container).

.menu a {
  vertical-align: middle;
}

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

Guide to managing dynamic checkboxes in a form with HTML, PHP, or JavaScript

Currently, I am working on a form that allows users to add books to a database. The authors of these books should be pulled from the database as well. My plan is to create a PHP loop that generates a checkbox in the form for each author listed in the datab ...

phphtmlcheckbox

The use of HTML in a more minimalist "less" style

After observing Less code, I've found it to be quite straightforward and efficient in comparison to Cascading Style Sheets. Is there a similar option available for HTML? ...

htmlcompiler-constructionless

Drag and Drop Functionality in ReactJS for Organizing Multiple Lists

After hours of searching, I have yet to find a React library that can handle sorting between multiple lists. The closest solution I came across was in this article: There is also an example provided here: The issue with this solution is that you have to ...

javascripthtmlreactjsdrag-and-dropjquery-ui-draggable

Instructions on how to bring in a JSON file for the purpose of parsing it

Initially, my JSON data was stored in a PHP file along with the necessary code for parsing it. Here is how it looked: main.php <script> var pdatabase= '{ "pobject" : [' + '{ "pname":"Pikachu" , "pid":"1" },' + '{ "pname":"S ...

javascriptphpjqueryhtmljson

CSS overflowing issue causing inability to reach bottom of div with scroll bars not functioning as anticipated

My objective is to create a layout featuring a sticky header and left sidebar, with a non-sticky DashboardBody (the green-bordered box) that can be scrolled through. When scrolling, I want the content at the top to disappear "under" the sticky header. The ...

cssreactjsflexboxmaterial-uistyled-components

Calculating the total of all values in a table

For my ngFor loop, the invoice total is calculated based on price and hours, but I also want to calculate the totals of all invoices in the end. <tr *ngFor="let invoice of invoiceItem.rows"> <td>{{ invoice.rowName }}</td> <td& ...

htmlangulartypescript

Comparing Animation Width with Background Image Size

I'm currently facing a challenge with making my animation resize automatically based on screen size, just like my background image does. The width of the animation seems to be inconsistent or doesn't stretch across the entire screen as I intended ...

htmlcss

Displaying a DIV inside an embedded DIV when selecting an option in HTML by utilizing JavaScript

My goal is to create a page where users initiate a questionnaire by clicking START in a web form - this action will open the DIV for the first question. As users answer each question (with yes/no choices), it will either display a specific DIV related to ...

javascriptjqueryhtml

Using CSS for layout positioning

This problem has been confounding me for quite some time now, even though the solution is likely very simple. I can't seem to figure out how to align two divs of different sizes side by side without one being pushed down a few lines when text is added ...

htmlcss

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

I'm facing difficulties with incorporating three.js into my project. Initially, I executed: I am referring to the guidelines provided here: In my VS Code terminal for the project folder, I ran the following command: npm install --save three Subsequ ...

javascripthtmlthree.js

The X-axis remains visible even after being hidden and still functions properly in mobile view

I've been encountering some minor bugs while working on a website recently. One particular issue I'm struggling to fix involves the x-axis not hiding despite attempts in CSS, especially on mobile view. body { overflow-x: hidden; overflo ...

htmlcssweb

Images and videos are not appearing on GithubPages when viewed online, but they are visible

Check out my GitHub repository: https://github.com/Snipervuk/ChristianMilicevic I'm encountering an issue where my HTML images or videos are not displaying on my GitHub pages online, but they do display locally. I've attempted several solutions ...

html

Achieving CSS centering with translate and avoiding content overflow

I have a code snippet for centering content both horizontally and vertically. It functions properly unless there is too much content, in which case it gets cut off. Is there a CSS solution to prevent this overflow issue without involving JavaScript? .b ...

htmlcsscentering

Is it possible to update logo image through CSS file?

I've been attempting to update the logo in this template where the logo is defined as a class from the css file, but unfortunately, my changes are not taking effect. Below is the code snippet. (P.S. Let's say the new logo image name is NEWLOGO.j ...

htmlcssimagebackground

Reinitializing AngularJS form controls

Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...

javascriptjquerycssangularjsforms

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Struggling with this one, I've carefully gone through all previous posts before reaching out for help. The structure of the HTML web table is provided below. I am specifically interested in extracting the date from the span tag, and here are the vari ...

pythonhtmlselenium-webdriverxpath

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries

To create a distinctive design, the HTML5 wrapper will specifically enclose the Header element

After using a border, I discovered that my wrapper is only wrapping the header and not extending down to the footer. Can anyone offer some guidance on how to wrap the entire content from the header to the footer? I've come across suggestions to speci ...

htmlcsswrapper

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

Hovering Div Issue

I have two divs named me and bubble nested within another div called holder. I am trying to trigger an action when a user hovers over the holder div. Strangely, the action works properly when I hover over me, but it doesn't seem to register when I hov ...

jqueryhtmlhover