I'm having trouble getting my text to center properly within a li container

I'm struggling to perfectly align the text in the middle of the li container. It seems to be centered horizontally, but vertically it's off.

I've attempted adding a span to the text and adjusting the margin and padding, but so far I've had no luck in getting the text to move.

My goal is to have the text centered both horizontally and vertically in the middle of the blue box. Currently, it's centered left to right, but not top to bottom.

<html>

<style>
.follow-button {
    height: 40px;
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
}

.follow-button:hover {
    cursor: pointer;
    background: #0059D0;
    border-color: #0059D0;
}

#follow-button-nav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
</style>

<ul id="follow-button-nav">
    <li class="follow-button">Follow</li>
 </ul>

</html>
htmlcss

Answer №1

To center the height of text effectively:

  • Adjust the top and bottom padding accordingly
  • Place the div inside a td and change the vertical-align property to middle

Although there are many discussions on this issue, it is advisable to do further research. It is the year 2019 after all.

Edit:

I also forgot to mention the line height. While not always recommended, you can simply add the line-height CSS property to the button.

.follow-button {
    height: 40px;
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height:40px;
}

Check out the fiddle here

Answer №2

If you want to achieve this, you can follow these steps:

.like-button {
    width: 100px;
    background: #0081F2;
    border: #0081F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    margin: 0;
    padding: 0;
}

.like-button:hover {
    cursor: pointer;
    background: #0059D0;
    border-color: #0059D0;
  }

#like-button-nav {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
<ul id="like-button-nav">
    <li class="like-button">Like</li>
</ul>

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

Horizontal alignment of Inline Block Elements is not achieved

Having trouble with the alignment of a form on a test site? Check out the form located under the div#search-bar. If you inspect the element, I have applied the following CSS: div.nf-field-container { width: 201px; display: inline-block; margin: ...

csswordpressinput

What is the optimal location for storing numerous blocks of text (without utilizing a database)?

If I have a control used on 10 different pages with a help icon, each page needs to display its own unique paragraph of help text. The selection of which help text to show is determined by a JavaScript function. In my scenario, having 10 paragraphs will n ...

c#htmlasp.netweb-applicationspage-lifecycle

Place an image in a div so that it is centered both vertically and horizontally

I have been trying to center an image both horizontally and vertically, but it seems like my code is not working properly. Here is what I have so far: #parent { position: relative; float: left; width: 700px; height: 400px; overflow: hi ...

csshtmlimage

Step-by-step guide on crafting your own twig with customizable color options using a colorpicker

I attempted to implement a color picker for my HTML form in Symfony, and it functioned flawlessly. However, when I tried using Twig for my form, I encountered difficulties meeting my expectations. I explored the GenemuFormBundle at https://github.com/gen ...

phphtmlsymfonytwig

Utilize text-to-speech technology to convert the output results into

Looking for a way to live stream a text to speech message triggered by a button press on your website? Unsure how to accomplish this with Node.js and generate the file after the button press? Let's explore some solutions together. ...

javascriptphpnode.jshtml

Mixing elements from the entire webpage

My goal is to create a cohesive look for the entire page by applying a background gradient to all layers. #myDIV { width: 400px; height: 400px; background-image: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%); } .bl ...

htmlcss

Generating DOM elements at specific intervals using Jquery

I am looking to dynamically create 1 div container every x seconds, and repeat this process n times. To achieve this, I have started with the following code: $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle(i); } }); f ...

javascriptjqueryhtmlcss

Creating a border with a unique and specific image

Is there a way to use an image as the border for my div elements? The key requirement is that the border must be positioned outside the box without affecting its size. It's important to note that all div items have the same width, but varying heights ...

htmlcssborderborder-image

Concealing HTML pages in Node.js: A step-by-step guide

I have a specific requirement where my website's html pages should only be accessible to users who are logged in. However, when I used the command below, my html pages became public: app.use(express.static('public')); For instance, I do no ...

javascripthtmlnode.jsexpresspublic

Enhancing Google Custom Search Engine with Bootstrap3 and CSS3 styling

I'm looking for guidance on how to customize the appearance of a Google Custom Searchbar on my website. Is it feasible to style it using CSS3 and Bootstrap 3 like the example in the image below? Any assistance is greatly appreciated. ...

javascripthtmlcsstwitter-bootstrap-3google-custom-search

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Currently, I am working with React and material-ui. Specifically, I am utilizing an appbar with tabs and my goal is to have the content of each tab expand to full width and height when selected. If you'd like to see an example, check out this sandbox ...

javascripthtmlcssreactjsmaterial-ui

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element? You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output ...

javascripthtmlcssangularjsangularjs-directive

Refreshing content with Ajax when the back button is clicked

Hey everyone, I've been working on an ajax site and I'm having trouble getting the content to reload when the back button is clicked. I'm using Dynamic Drives ajax content script along with a script that changes the URL onclick and a popstat ...

javascriptjqueryhtmlajax

Is there a way to deactivate a div in Blazor when clicking outside of the div?

Is it possible to have two divs on a single page, where one appears on the right side and the other on the left side? Is there a way to close or hide the left side div whenever we click on the right side div? ...

c#htmlcssasp.net-coreblazor

Creating a reset or refresh button with JavaScript: Step-by-step guide

Can someone please help me figure out how to create a button that will refresh the page while also resetting all values to their default settings? ...

javascripthtml

A step-by-step guide on incorporating click and drag events into an HTML Canvas

I have developed a unique business tool using html canvas. It is equipped with a variety of draggable and droppable elements. I personally created the functionality with the following pseudocode: if(mouseIsDown && mouseInBoundsOfIcon){ icon.g ...

htmlcanvas

Hovering in Javascript

Imagine I have the following code snippet: <div class="class1"> ... random content </div> I want to use JavaScript so that when I hover over that div, a CSS attribute is added: background-color:#ffffe0; border:1px solid #bfbfbf; This is a ...

javascripthtmlclass

Expanding a list in AngularJS: Implementing a scrollbar for a seamless user experience

I need assistance in creating a layout using AngularJS and angular-material that includes a vertical scrollbar when necessary: <div layout="column"> <div> <!-- Occupies 80% of window browser --> <md-list> <md-l ...

htmlcssangularjsscrollbarangular-material

Issue with functionality of Bootstrap template generated by Visual Studio 2013

I've set up a new ASP.NET MVC project using the latest Bootstrap 3 template, but I'm encountering an issue. There doesn't seem to be any spacing between the header navbar and the content displayed below by Renderbody(). I've attempted t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3visual-studio-2013

iPhone failing to interpret HTML entities

I am currently developing a website for a client, who is facing a bug that I have not been able to replicate... For reference, here is an example page: The issue my client is experiencing involves using an iPhone to navigate the website. It appears that ...

iphonehtmlangularjs