Center the text within the surrounding box

I am trying to center text next to an inline-block element but using negative margin on the span element changed the layout of the whole content. Can anyone help me with this issue?

Here is my code:

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:1px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-box {
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}
<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span>Legend a
  </div>
  <div>
    <span class="b legend-item-box"></span> Legend b
  </div>
</fieldset>

Thank you in advance for your help! - Max

htmlcss

Answer №1

Is this the desired outcome?

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:1px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-container {
  display: flex;
  align-items: center;
}

.legend-item-box {
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}
<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span>Legend a
  </div>
  <div>
    <span class="b legend-item-box"></span> Legend b
  </div>
</fieldset>

Answer №2

To achieve this, you can utilize the CSS property vertical-align: middle;. For more information, refer to this link.

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:10px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-box {
  vertical-align: middle; /* <--- added */
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}
.legend-item-container {}

.legend-text { /* <--- added */    
  font-size: 0.6rem; 
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}
<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span><span class="legend-text">Legend a</span>
  </div>
  <div class="legend-item-container"><!-- added class -->
    <span class="b legend-item-box"></span><span class="legend-text">Legend b</span>
  </div>
</fieldset>

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

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

As a newcomer to Angular, I am trying to figure out how to properly save a new user with an avatar. Can someone help me understand how to pass the Blob value of the avatar to my user Model for successful saving? Below is the code snippet I am working with ...

htmlangulartypescript

Is there a way to programmatically switch a mobile device to desktop view using HTML or JavaScript code?

I recently made some updates to my website, but the mobile view is not as polished as I would like it to be. I attempted to modify the code myself, but it has been challenging, especially since I did not originally develop the front-end. Does anyone know ...

javascripthtmlbootstrap-4

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

javascriptphphtmlmysqljson

What is the process for adding the multiple attribute to a select dropdown in a form?

I implemented the selectric plugin for dropdowns on my website. I included the multiple attribute in the select tag, but it doesn't seem to be functioning properly based on what is shown on the index page of the selectric plugin located at: This is t ...

jqueryhtmljquery-selectric

Exploring the possibilities of CSS grids within the Wordpress platform

After successfully building my website, I am now in the process of converting it into a customizable wordpress theme. One challenge I am facing is integrating a dynamic gallery using CSS grid. The goal is to upload photos, videos, and gifs in Wordpress and ...

phpwordpresscsscss-grid

Tips for hiding a div element until its visibility is toggled:- Set the display property of

Looking for some guidance on this jQuery code I'm working with to create a toggle menu. The goal is to have the menu hidden when the page loads, and then revealed when a button is clicked. However, currently the menu starts off being visible instead o ...

javascriptjqueryhtml

Extract a section of the table

I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...

javascripthtmlangularhtml-table

Steps for adding a div after a specified number

To display the following div after getting a value greater than or equal to the specified value and retrieving it through ajax: 1. How can I show the below div with the given value? .mainbox{ width:auto; height:auto; padding:20px; background:#f00; } .i ...

javascripthtmljson

AdBlock causing image display issue in Firefox with bootstrap and Wordpress

My Wordpress + Bootstrap code is not displaying images in Firefox, despite working fine in other browsers. I tried disabling ad-block as suggested on SO, but it didn't help. I'm stuck. Here's the HTML snippet: <div class="navbar-collap ...

htmlcsswordpressfirefoxtwitter-bootstrap-3

Ensure your mobile device is age 13 or over before proceeding

I am developing a project with Next js. Here, I want to render a component if it is a mobile device. However, if I use the isMobileDevice value in jsx, I get the errors below. import useTranslation from "next-translate/useTranslation"; import isM ...

javascriptcssreactjsnext.jsjsx

I'm having trouble figuring out how to perfectly center this div on all types of devices

As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success. Check out my code below: Snippet: :after, :be ...

htmlcss

The height attribute is not functioning properly in Mozilla Firefox

I am facing an issue on my website where I set the height of the body tag to 1460px. It works perfectly on Chrome and IE, but there are problems on Firefox. See my code below: body { background-image: url('../images/background.jpg&apos ...

csshtml

Could there possibly exist a counterpart to .cloneNode?

I'm currently working on a recipe website submission form, and I've successfully implemented code that allows me to add more ingredients dynamically. addIngredientsBtn.addEventListener('click', function(){ let newIngredients = ingre ...

javascripthtmlnode.jsejs

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

htmlcsstwitter-bootstrap

iOS application becomes unresponsive when attempting to load a video within a webview, but does not

I developed an iPad app using a 3rd party tool called OpenPlug which converts AS3 to C++ and then exports to iOS. This app displays pictures and videos in a slideshow. The videos are shown using a WebView loading an HTML page with the video source set to a ...

ioshtmlvideosafari

validating API keys in Django

What is the process for verifying API keys in Django? I am currently using RapidAPI and they provide a key, but how can I authorize it with the URL? views.py def thanks(request): url = "https://webknox-trivia-knowledge-facts-v1.p.rapidapi.com/trivia/r ...

pythonhtmldjangoapi

Utilize Bootstrap's custom validation exclusively on fields that are invalid

Exploring Bootstrap features has led me to wonder if there's a straightforward method to change the styling of a field specifically when it is considered invalid. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-5

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

The getElementById function can only select one option at a time and cannot select multiple options

I'm having an issue with a JavaScript function that is supposed to allow me to select multiple options, but it's only selecting the first one. Here is the JavaScript code: function index(){ var a="${staffindex}".replace("[",""); ...

javascripthtmlselectgetelementbyid

A step-by-step guide on showcasing database data on an HTML page using jQuery

I am currently using jQuery to make an HTTP GET request and fetch JSON data from a database. After executing the request, I received the JSON array successfully. Now, I am attempting to display this JSON data on an HTML page by using the jQuery $(newData ...

jqueryhtmljson