Want to ensure a span is perfectly centered both vertically and horizontally within a div using minimal CSS code?

I am currently working with LESS (CSS) and facing an issue with aligning a span element (which contains button text) inside a div container (button). The span is horizontally centered but vertically aligned to the top. I also want the span to automatically adjust its size based on the text content.

Below is the code snippet in LESS:

.button(@color:@crimson-red) {
  border-radius: @small-border-radius;
  border-style: none;
  background-color: @color;
  text-align: center;
  display: inline-block;
}

.button-font {
  vertical-align: middle;
  overflow: auto;
  font-family: "Helvetica Neue", sans-serif;
  color: @off-white;
  font-weight: bold;
  font-size: 10pt;
  position: relative;
}

.blue-button {
  .button(@blue);
}
css

Answer №1

To achieve this alignment, utilize the flexbox layout.

By applying the following properties and values to the selector .button, you can center the span element.

 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

Referenced below is the complete 'less' file:

@off-white: #fefefe;
@blue: #4286f4;
@small-border-radius: 5px;

.button(@color:@crimson-red) {
  border-radius: @small-border-radius;
  border-style: none;
  background-color: @color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-font {
  font-family: "Helvetica Neue", sans-serif;
  color: @off-white;
  font-weight: bold;
  font-size: 10pt;
  position: relative;
}

.blue-button {
  .button(@blue);
  width: 300px;
  height: 100px;
}

This would be the corresponding HTML code:

<button class="blue-button">
    <span class="button-font">Hello, lots of text here</span>
</button>

You may view a compiled CSS version on JSFiddle.

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 can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

I need help figuring out how to revert an element back to its original size after it has been modified with .resizable. I attempted the following: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code. ...

javascripthtmljquerycss

Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is body { color: #c6c6c6; background-color: #2f2f2f; } Meanwhile, in my own CSS: body { ...

httpcsstwitter-bootstrap

Design buttons that are generated dynamically to match the style

I have a challenge in styling dynamically generated buttons. I've developed a component responsible for generating these dynamic buttons. const TIMER_PRESETS: Record<string, number> = { FIFTHTEENSEC: 15, THIRTYSEC: 30, FORTYFIVESEC: 45, ...

cssreactjstypescriptmaterial-uiclient-side

Ways to ensure "overflow: hidden" functions correctly across all web browsers

Issue: I am in the process of designing a webpage layout using divs and css instead of relying on an HTML table structure. It is essential for me to ensure that this design functions smoothly across all major browsers. The challenge I'm facing invol ...

cssbrowsercross-browserhtml

Ways to adjust the size of div and its elements to fit the window dimensions

When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using: .headerdiv{ width: ...

javascripthtmlcssflexbox

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js

What are some creative ways to animate a highlight effect on a CSS

I'm struggling to implement a sliding underline effect for my top navigation bar on hover. I've tried using transitions and keyframes, but so far it's not working as expected. My current attempt only triggers the effect on the parent elemen ...

htmlcssanimationcss-animationsnavbar

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

htmlcssangularjs

Tips for managing a date picker with JavaScript using the Selenium WebDriver

I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...

javascriptpythoncssselenium

Is there a way to automatically insert page numbers into every internal link on an HTML page?

When in print mode, I want to display links like this: <a href="#targetPage">link</a> but I'd prefer them to appear as: <a href="#targetPage">link (page 11)</a> (assuming the target page is on page 11 in the print preview). ...

javascripthtmlcss

Enhance your website by adding a personalized touch with unique hover

<html> <body> <a href="test.html" style="{color: blue; background: white} :visited {color: red} :hover {background: red} :visited:hover {color: red}"> Test </a> </body> </html> What i ...

htmlcss

Is there a way to remove the spacing that browsers automatically add to <input> elements?

Take a look at this example: http://jsfiddle.net/JPQxX/ I tested this in both Chrome and Firefox. In both browsers, there seems to be a small 1-2px margin between the two input elements. I am looking for a solution to make these two elements touch without ...

htmlcss

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

css

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

htmlcss

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

javascriptcssreactjsnext.jsfrontend

Want to learn how to display a description below a photo when you hover over it in a photo gallery?

I am currently creating a basic photo gallery where hovering over a thumbnail displays an enlarged photo below it. My goal is to also have text displayed inside a white text box when hovering over each thumbnail, with unique descriptions for each. I need ...

javascripthtmlcss

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

javascriptjqueryasp.netcssajax

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement) import Butto ...

cssreactjstypescriptreact-grid-layout

The panel header is clickable and overlaps with the header buttons

My panel component includes a header with a title and buttons positioned in the right corner. Currently, the downward arrow (chevron) is used to toggle the expansion/minimization of the panel's contents. When I attempt to make the header clickable to ...

cssangular

Center and align pictures within a stationary container

I am working on a simple webpage that has a fixed footer. In this footer, I want to have 5 images centered with equal distances between them. Below is my HTML/CSS : Footer div : div.fixed { position: fixed; bottom: 0; right: 0; width: ...

htmlcss