The proper way of aligning text in the middle of a button

I'm currently working on designing a CSS button that will be placed in the top left corner and serve as a back button to the previous page. However, I am facing challenges when it comes to centering the arrow or text perfectly in the middle of the button. Despite trying various methods, I haven't been able to find a solution yet. Any assistance with this would be greatly appreciated.

.goback {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  font-size: 60px;
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: #0077be;
  color: #ffffff;
}
<button class="goback">&#8249;</button>

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

htmlcss

Answer №1

.goback {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  font-size: 60px;
  display: table-cell;
  vertical-align: middle;
  line-height: 1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: #0077be;
  color: #ffffff;
  padding-bottom: .2em;
}
<button class="goback">&#8249;</button>

For your situation, a more effective solution would be to add padding-bottom. This issue arises because the symbol does not have a set height equal to the line-height. Each font may render this symbol differently in lowercase. If you choose to implement this solution, ensure that the font works consistently across all platforms.

In my similar projects, I use an SVG icon (specifically an SVG sprite) implemented with pseudo-classes and svg backgrounds encoded in base64. You can view an example of this implementation here.

Answer №2

My suggestion is to simply include a padding bottom of 0 and line-height of 0; this will center the icon.

.goback {
   padding: 0px 0px 5px 0px;
   line-height: 0;
}

This adjustment should be beneficial for you.

Answer №3

Here are a few recommendations for you: consider changing the height and width to 85px if feasible.

Upon investigation, I noticed that the reason it was not aligning properly was due to conflicting values of font-size, height, and width. I attempted to address this issue by adjusting the alignment.

If you prefer the height and width to be 80px, then you will need to decrease the font-size and utilize the padding property.

UPDATE:

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

CSS snippet

.goback {
   position:absolute;
   top: 20px;
   left: 20px;
   font-size: 65px;  
   width: 85px;
   height: 85px;
   border-radius: 50%;  
   background: #0077be;
   color: #ffffff;   
   border:none;
   padding:0px 5px 20px 0px;   
 }

https://i.sstatic.net/9r2JD.png

Answer №4

I suggest avoiding setting fixed height or width; instead, consider using padding: 10px 30px (as an example value). This way, your layout will automatically adjust if the text length increases.

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

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

Transferring data from ng-init to <script> in AngularJS

Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...

javascripthtmlangularjs

Generate a fresh DOM element when a particular height threshold is achieved, utilizing a portion of the previous DOM element's content

Update: 27th December 2016 The heading has been modified because any DOM element can be the target, whether it is a <p> element or not. Additional information has been provided about the tools being used and the desired outcome. Are there nativ ...

javascripthtmlangularjsnode.jselectron

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

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

I am facing an issue and need some help. I am working on creating a three-column page layout where the middle section is for posts, the right section is for links and references (a bit long), and the left section is fixed. My question is: How can I preven ...

javascripthtmlcss

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

javascripthtmlcss

Attempting to reach <p> from numerous web pages

Currently, I am working on a project where I need to extract text data from various websites. I have successfully managed to retrieve the text data using <p> tags. I would really appreciate any assistance with this task. Thank you! ...

javascriptpythonhtmlcsspython-3.x

Using jQuery, Ajax, and HTML together can create dynamic

Is there a way to run JavaScript functions in an HTML file that is loaded using AJAX? The HTML file contains both text and JavaScript, but only the inline JavaScript seems to work (like onclick="dosomething();return false"). The pre-defined functions wra ...

javascriptjqueryhtmlajax

Issue with iPad Pro displaying Bootstrap 4 Navbar toggle icon

Having trouble with my Bootstrap 4.1.1 navbar on iPadPro. It's not displaying the correct data from the div and it's not collapsing properly. However, it works fine on small devices. Any suggestions on how to fix this issue? Here's the code ...

cssangulartwitter-bootstrap

By employing the $watch method, the table disappears from the div element

I've integrated the isteven-multi-select directive for my multi-select dropdown functionality. By providing it with a list of thingsList, it generates a corresponding checkedList as I make selections. Initially, I used a button to confirm the selecti ...

javascriptjqueryhtmlangularjsangular-datatables

The issue with HTML5 video not looping in Chrome on Sitefinity CMS

I encountered a unique issue where I was unable to get an HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplayed without any problems. Here is a snippet of my code: <video id="frontpage-video" autoplay loop> ...

htmliiswebkithtml5-videositefinity

Problem with Angular Slider

I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component. carousel.component.html: <div class="carousel"> ...

htmlcssangulartypescriptslider

Tips for creating a dynamic animation: How to make a div fall from the top and rotate

Hey everyone, I'm working on creating an animation where a phone falls from the top and then rotates and skews to give the illusion of a 3D shape when it reaches the bottom. However, I'm facing an issue with flickering in the animation when it hi ...

htmlcss

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

What is the best solution for setting up a div containing a table with images inside?

I'm looking to achieve the following: <div id="display"> <div id="slideshow1"> <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle"> <img ... /> </td></tr> ...

jqueryhtmlcssdynamic

An issue arises with an unterminated string literal whenever I attempt to click on an anchor

Upon clicking a tag, the following error occurs unterminated string literal <a onclick="ga('send', 'event', 'CloudStore', 'Click', 'Cloud is here - Banner’);" href="about.php" class="red-text block"> ...

htmlonclickanchor

Encountered an issue while implementing the post function in the REST API

Every time I attempt to utilize the post function for my express rest API, I encounter errors like the following. events.js:85 throw er; // Unhandled 'error' event ^ error: column "newuser" does not exist at Connection.parseE (/Use ...

javascripthtmlnode.jsapiexpress

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

cssangularjsuser-interfacekendo-uischeduler

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img. My goal is to have the thumbnails scroll along with the main pictures as the user ...

javascriptjqueryhtmlcss