Tips for ensuring elements in a button are not vertically centered

My dilemma is unique: while many struggle with vertically aligning elements, I face the opposite issue. The contents of my button are currently vertically aligned, but I want them to wrap around like a normal <div> while retaining its clickable functionality.

To illustrate, the button has fixed dimensions and should display its content as shown in this image.

button {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: #ddd;
  color: black;
  border: 2px solid #aaa;
  text-align: left;
  padding: 5px;
  vertical-align: top;
  font: inherit;
}
  
.c1 {
  display: block;
  font-size: 20px;
  color: gray;
  padding-bottom: 5px;
}

.c2, .c3 {
  display: inline-block;
  background-color: purple;
  color: white;
  padding: 0 6px;
  border-radius: 100%;
}
<button>
  <span class="c1">1</span>
  <span class="c2">2</span>
  <span class="c3">3</span>
</button>

Answer №1

Replace the internal div with a span to ensure proper and valid HTML structure.

Next, utilize flexbox for organizing the elements.

button {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  width: 150px;
  height: 100px;
  background-color: #ddd;
  color: black;
  border: 2px solid #aaa;
  text-align: left;
  padding: 5px;
  vertical-align: top;
  font: inherit;
}

.c1 {
  font-size: 20px;
  color: gray;
  flex: 1 0 100%;
}

.c2,
.c3 {
  background-color: purple;
  color: white;
  padding: 0 6px;
  border-radius: 100%;
}
<button>
  <span class="c1">1</span>
  <span class="c2">2</span>
  <span class="c3">3</span>
</button>

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

What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background? Here is my code: const useStyles = makeStyles(theme => ({ menuColor: { backgroundColor: theme.palette.primary.main, color: '#ffffff', ...

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goa ...

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

The properties of margin:auto and text-align:center are failing to function as expected

I'm facing an issue while creating a website. The 'margin: auto' and 'text-align: center' properties in my CSS code seem to not be functioning as expected. Can someone please review my code in inspect element and identify the probl ...

Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

For my latest project, I used Bootstrap to create a template that adapts well to different device breakpoints. Everything is working smoothly except for the positioning of the arrows on the sides of the image. I want them to be centered halfway down the ...

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

Revolutionary scroll-based navigation fill transition

I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...

CSS Hyperref and Anchor tags

It appears that when adding an 'href' tag to my anchor, all of the CSS formatting is lost. Is there a special way that CSS treats links? Below is the basic CSS: .topmenu > ul > li > a:visited, .topmenu > ul > li > a:active, .t ...

How can I show two unique chart modals simultaneously?

Below is the chart that I am currently working on: https://i.stack.imgur.com/bHSj6.png While I am able to display the charts separately, I am encountering difficulties when trying to display both of them on the same chart line. <!DOCTYPE html> < ...

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

Achieving Full Height for Parallel Columns Divs with Bootstrap - A How-To Guide

I am struggling with getting two divs in parallel to have full height. Even though I have the divs side by side, when I try to set their height:100%;, nothing happens. What CSS properties do I need to modify to achieve this? The goal is to create a cove ...

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

What is the best way to align two elements side by side using flexbox?

After trying to find a solution on this site without success, I realized that my situation is quite unique. I need to avoid changing the HTML code, minimize the use of classes, and refrain from using IDs. The current HTML structure I am working with inclu ...

What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML: Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels above each radio button. I would a ...

Make the text within the CSS style of ".well" wrap around the width

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...

prevent parent jQuery functions from interfering with child function execution

I am facing an issue with conflicting jQuery functions between parent and child elements. The child function is a bootstrap function, while the parent is a custom function. The main objective is to limit the height of the parent div (refer to the code belo ...

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen. For better understanding, here is an accompanying image: https://i.stack.imgur.com/oy6d9.png However, the current co ...