CSS vertical alignment techniques

I am having an issue with aligning text in a <div> within an <li>. The size of the text keeps changing.

This is my HTML:

<li id="button_welcome"><div>Welcome</div></li>

And this is my CSS:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
}

Does anyone know how I can keep the text centered within the <li>?

P.S. I had to remove a gradient background on the <li> because it was causing some issues.

Thanks,

Fraser

htmlcssvertical-alignment

Answer №1

UPDATE

To create a gradient background, consider using CSS styles. You can view an example in the following fiddle:

http://jsfiddle.net/UnsungHero97/F5FEg/1/

If you prefer to use an image as the background, it should not impact the text positioning since it is designated as a "background" image. In case of any unusual alignment issues, update your question with code, screenshots, or a fiddle for better assistance.

Set the line-height to match the height of the <li>...

#about_nav li div{
    text-align:right;
    margin-right:10px;
    line-height: 48px; /* same as li height */
}

Vertical alignment can be challenging. Refer to this article for a comprehensive understanding of how vertical-align functions and tips on aligning elements vertically:

I trust this information proves useful.
Hristo

Answer №2

One way to achieve a table-like layout using CSS is by simulating it.

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    display:table-row;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
    display:table-cell;    
}

Answer №3

Ensure that the line-height matches the height measurement, with the font size set to be smaller than the height.

<style>
    #my_div{
        height: 30px;
        line-height: 30px;
        font-size: 10px;
        border: 1px solid black;
        width: 200px;
        text-align: center;
    }    
</style>
<div id="my_div">My DIV</div>

Answer №4

One of my favorite solutions is from Hristos =) Here's an alternative approach:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    border:1px solid;
}
#about_nav li div{
    height:inherit;
    width:inherit;
    padding-right:10px;
    display: table-cell;
    text-align:right;
    vertical-align: middle;
    border:1px solid;
}

If you specify the height and width of the div, you can utilize the vertical-align property

Check out this Example: http://jsfiddle.net/3asEN/

Answer №5

Make sure to include text-align: center; in either the div or the li element.

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

JavaScript - Unable to unselect a button without triggering a page refresh

I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the but ...

javascripthtmlcss

Tips for detecting HTML updates using Python requests

My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...

pythonhtmlhttppython-requestspython-requests-html

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss

I've got some .html files stored on GitHub and I want to open them in Sublime Text 3. How can I achieve this? Could you please provide me with a detailed, step-by-step guide

Attached are the GitHub files, and I'm curious about how to access them using Sublime Text 3. ...

html

Any ideas on what to do now that the navbar-default has apparently been removed in Bootstrap 4 (beta 2

The navbar-default class in Bootstrap 3 had a sleek linear-gradient background and a few other appealing features. Unfortunately, it appears to have been removed in Bootstrap 4 beta 2. Before attempting to manually replicate the desired effect, I wanted ...

cssbootstrap-4

Is it possible for HTML to call library scripts in the sidebar?

I recently encountered an issue with a sidebar created in HTML on Spreadsheets. Everything was working perfectly until I moved the code to the main library where all the code is managed. Now, it seems that the function used by the sidebar is undefined. How ...

htmlgoogle-apps-scriptgoogle-sheetssidebar

Struggling to implement a sidebar in HTML using jQuery and running into issues?

I am struggling to create a template that includes a navbar, sidebar, and other elements that can be used across multiple HTML files. Despite trying different approaches, including changing the jQuery version and downloading jQuery, I am unable to make it ...

javascripthtmljquerycss

HTML elements are replaced by codes on the screen

After setting up an ajax request to run at regular intervals, I encountered a problem when trying to navigate back. Instead of displaying the expected HTML elements, the browser showed all of my HTML code. <script> window.setInterval(function () ...

htmlajaxlaravel

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

Center Vertically Using CSS Flexbox

Hey there, I'm currently facing an issue with aligning my website's logo vertically in the middle with my navigation link list. I have attempted to use "vertical-align: middle" on my div columns but it doesn't seem to be working. Right now, ...

javascriptjqueryhtmlcss

"Utilizing a unique jQuery grid numbering system for organizing and categorizing each

I am attempting to implement a numbering system for elements that mimics a grid layout, similar to an Excel spreadsheet. Within a container, my elements are structured like this: <div class="container"> <div class="ele"></div> & ...

jqueryhtml

Use CSS to make the margin of one div the same width as another div

There are two classes that control the sidebar layout: .w-sidebar { width: 250px; min-width: 250px; max-width: 250px; } .row.collapse { margin-left: -250px; left: 0; } In order for the second class to function properly, the margin-le ...

htmlcssbootstrap-4

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

javascriptphphtmlwordpress

Loading screen while all files and audio are being loaded

My JavaScript code is responsible for displaying and playing audio on my website. Unfortunately, the load time of the page is quite slow. To address this issue, I decided to follow a tutorial on installing a preloader, which can be found at . Although I ...

javascriptjqueryhtmlcssimage-preloader

How can I customize the color of the check mark symbol in a bootstrap checkbox?

Here is my customized HTML code using Bootstrap: <div class="col-lg-4 col-12 text-center"> <div style="width: 80%; margin: auto"> <ul class="list-group"> {% for sl in my_list %} <li ...

htmlcsscheckboxcolorsbootstrap-5

Guide to dynamically adding two CSS files in a single component in Angular 8

Within this component, there is a form that needs to support two languages, each with its own unique CSS style - one for left-to-right (ltr) direction, and the other for right-to-left (rtl) direction. Is there a way to conditionally apply two different CS ...

cssangulartypescriptformsangular8

Trigger a dialogue box when a button is clicked to show dynamically inserted list elements

My goal is to have a collection of list items, each with its own button that triggers a unique dialog box displaying specific text. Below is the HTML code: <ul id="filter-list" class="scrollable-menu text-center"> @foreach (var filter in ...

javascriptjqueryhtml

Laravel's Yajra Datatable is experiencing difficulty with wrapping text on a particular column

I'm currently working on a project that utilizes Yajra Laravel-datatables for managing data tables. Incorporated Yajra package installed through composer.json The issue I'm encountering involves text wrapping, as shown in the screenshot below, ...

csslaravelbootstrap-4datatablesyajra-datatable

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

My latest project setup involves flask, uwsgi, and nginx. The backend solely serves json data through an API, while the client side takes care of rendering. Typically, my Nginx configuration looks like this: My usual setup (with basic proxy passing): se ...

javascripthtmlnginx

Exploring the possibilities of personalized attributes/directives in HTML and Javascript

My current challenge involves understanding how vue.js and angular.js handle custom directives in HTML. Suppose I have a div like this: <div my-repeat="item in items"></div> To replicate the functionality of vue.js, do I need to search throug ...

javascripthtmlangularjsvue.js