css - the art of centering span text within a rounded button

CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js

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

I'm trying to center the dash text within a button, but I'm struggling to find a solution.

html

  <button class="round-button align-middle mr-1">
    <span>-</span>
  </button>

css

.round-button {
  min-width: 20px;
  max-height: 20px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding: 0;
}
.round-button:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
}
cssvue.jsbootstrap-4

Answer №1

html

<button class="circle-button align-center ml-1">x</button>

css

.circle-button {
  min-width: 30px;
  height: 30px;
  border-style: none;
  color: black;
  background-color: #ff5733;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  line-height: 30px; // to center text vertically
}

All you have to do is adjust the line-height to match the button's height, eliminating the need for an extra span element. Unnecessary styles were also removed for a cleaner look.

Answer №2

Experiment with setting line-height: 20px like suggested. If the appearance is still not right, it's possible that you are working with a unique font that has irregular line spacing. In such situations, adjust the line-height value until the text appears satisfactory.

Answer №3

Update the .round-button class with the given style attributes:

.round-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

Furthermore, delete the styling for .round-button:before.

Answer №4

Give this a shot.

.round-button {
  background-color: #3498db;
  border-style: none;
  border-radius: 100%;
  color: #fff;
  cursor: pointer;
  
  aspect-ratio: 1 / 1;
  width: 48px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}
  <button class="round-button">
    <span>-</span>
  </button>

Answer №5

To enhance the appearance, consider substituting <span>-</span> with 

<span style="position:relative; left:0px; top:-3px">-</span>
. Feel free to experiment and adjust until you achieve the desired result.

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

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...

javascripthtmlcssbutton

Using the CSS property 'clear' creates a significant gap in the layout

Using a div like this to clear space after floats: .clear { clear:both; } However, the formatting is getting messed up with extra space. Any ideas on how to fix it? Appreciate your help! ...

css

Recurrence of solely the middle segment of the separator's background picture

I have a unique divider image with fading top and bottom parts. I'm wondering if it's possible to use a sprite and 3 divs to only repeat the middle section, considering that my height is variable. Do I need separate images for the top, middle, an ...

javascripthtmlcss

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

css

Is it possible to reorganize the order of elements in a

My goal is to create a flex column layout where the image appears first. However, I'm facing an issue with the code below, as it only changes the order when the flex direction is set to row (image on the left). It does not work for rows. </head> ...

htmlcsstailwind-css

Switch the text style when hovering, then switch it back upon second hovering

Searching for a method to modify the font of individual letters when hovering over them. The goal is for the letters to revert back to their original font after a second hover (not on the first hover-off). Any assistance would be greatly valued! ...

javascriptcssfontsmouseover

The template for a Vue dynamic component refuses to function properly with a promise

<template> <component :is="myComponent" /> </template> <script> export default { props: { component: String, }, data() { return { myComponent: '', }; }, computed: { loader() { ...

vue.jsvue-dynamic-components

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...

cssangularkendo-uikendo-treeview

There appears to be an issue with the onmousemove function

I am currently troubleshooting an issue with a script that I wrote for my button. Interestingly, the code works flawlessly when I test it on CodePen, but I encountered an error when I attempted to run it in VSCode. Even after trying to recreate the script ...

javascripthtmlcss

Guide on navigating to a different page by simply clicking on a row within an HTML table

I am using an MVC application. When a user clicks on a row in the Index page, I want them to be directed to the DetailInfo page. How can this be achieved? This is part of the code in Index.cshtml @for (var item = 0; item < Model.Count; item++ ...

ajaxvue.jsmodel-view-controller

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

javascripthtmlcss

How can you implement a bootstrap navigation bar in a vue.js project?

I have encountered a problem with using html in my vue project. Despite following the documentation, it seems that the html is not working properly. I am unsure if this issue could be related to the import of popper.js. I have checked my code and I believe ...

javascriptvue.jsbootstrap-5popper.js

Combining multiple images into one CSS image sprite to create 4 clickable

Could someone please review this segment of the CSS to ensure its accuracy? CSS #nav-list { list-style-type: none; background-repeat: no-repeat; background-image:url("../_img/Footersprite.png") } #nav-list li, #nav-footer a { height: 40 ...

htmlcss

Tips for adjusting the placeholder color in Material UI using React JS

Is there a way to customize the background color and flashing color of the Skeleton component in Material UI? I would like to implement custom styling for it, similar to what is shown below: <Skeleton variant="circle" classes={{root:'pla ...

javascriptcssreactjsmaterial-ui

"Safari browser may hide placeholder text, making it invisible to viewers

When adding color to the placeholder, I utilize this CSS property: .pro_heading input::-webkit-input-placeholder { color: #777; } However, it appears that in Safari, the color is not visible. https://i.sstatic.net/hXmjX.jpg ...

htmlcssmobile-safariplaceholder

How can I prevent the content from sliding out of view in a Bootstrap carousel?

I am looking to create a slider that includes a form or text. However, I have noticed that when scaling up by 50-75% or when there is a lot of content, the content extends beyond the slider. Image Check out my code on jsfiddle: jsfiddle.net/sL70r2an/ ...

htmltwitter-bootstrapcsscarousel

Can you tell me the name of the scrolling effect used for the background on this website?

Hello everyone, I have a question to ask. Be gentle with me as this is my first time posting here. I've been learning CSS3 and recently came across an effect that caught my eye. I'm not sure if it falls under the category of parallax scrolling or ...

css

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...

javascriptjquerycsstwitter-bootstrap

Picture not showing up when loading iPhone video

My website features a video that is displayed using the following code: <div class="gl-bot-left"> <video controls=""> <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" ...

javascripthtmlcssiphone