Aligning text beneath a positioned span element

I have a code snippet where I am trying to center a number within a div and then center the units right below the number. The number is centered correctly, but the units are not aligning as desired. How can I achieve this layout?

div.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;
  position: relative;
}

span.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.units {
  margin: 0 auto;
}
<div class="div1">
  <span class="number">1,000</span>
  <br/>
  <span class="units">miles</span>
</div>

htmlcss

Answer №1

Utilize flexbox for layout

.container {
  height: 200px;
  width: 200px;
  background-color: orange;

  display: flex;
  flex-direction: column;
  justify-content: center;    /* Align items vertically at center */
  align-items: center;    /* Align items horizontally at center */
}

.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
}
<div class="container">
  <span class="number">1,000</span>
  <span class="units">miles</span>
</div>

Answer №2

To successfully incorporate the text, simply place it within the initial span as shown below:

<div class="container">
    <span class="numeric">
        5,000
        <span class="categories">feet</span>
    </span>
</div>

Also, include this styling in your CSS file:

.categories{
    display:block;
    text-align: center;
    font-size: 16px;
}

Answer №3

Here is a method you can utilize, which involves utilizing flexbox:

.container{
  display:flex;
  flex-direction:column;
}

Answer №4

Adjust the value of top within the span.units element.

div.div1 {
  height:200px;
  width:200px;
  background-color:orange;
  position: relative;
}
span.number {
font-family: Verdana;
font-size: 36px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
span.units {
font-family: Verdana;
font-size: 36px;
font-weight: bold;
position: absolute;
top: 70%; /* Adjust this value */
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="div1">
   <span class="number">1,000</span><br>
      <span class="units">miles</span>
   <br>

</div>

Answer №5

Discover the power of CSS Flexbox - it's a game-changer! (plus, say goodbye to unnecessary CSS clutter)

div.box {
    height:200px;
    width:200px;
    background-color:orange;
    display:flex;            /* Transform the container into a flex-container */
    justify-content:center;  /* Align children horizontally */
    align-items:center;      /* Align children vertically */
    flex-direction:column;   /* Switch to a column-based layout */
}

div.number {
    font-family: Verdana;
    font-size: 36px;
    font-weight: bold;
}
<div class="box">
  <div class="number">1,000</div>
  <div class="units">miles</div>
</div>

Answer №6

To apply absolute positioning to both the number and units, enclose them in another div element.

    .div1 {
      height:200px;
      width:200px;
      background-color:orange;
      position: relative;
    }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
    }
    .number {
      font-family: Verdana;
      font-size: 36px;
      font-weight: bold;
    }
    <div class="div1">
      <div class="center">
       <span class="number">1,000</span>
       <br/>
       <span class="units">miles</span>
      </div>
    </div>

Answer №7

Highlighted below is a Code Snippet showcasing the following:

  1. Standard Augmented Solution
  2. Alternative Absolute Positioning Solution
  3. Flex-Box Solution
div.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;
  position: relative;
}

span.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.units {
  margin: 0 auto;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}


/* Additional */

.container {
  height: 200px;
  width: 200px;
  background-color: orange;
  position: relative;
}

.container_number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
}

.container_units {
  margin: 0 auto;
}

.container_inner {
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
  height: 30%;
}

.flex_container {
  height: 200px;
  width: 200px;
  background-color: orange;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.flex_container_number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
}

.flex_container_units {
  margin: 0 auto;
}
<!-- Standard Augmented Solution -->
<div class="div1">
  <span class="number">1,000</span>
  <br/>
  <span class="units">miles</span>
</div>

<hr>
<!-- Alternative Absolute Positioning Solution -->
<div class="container">
  <div class="container_inner">
    <span class="container_number">1,000</span>
    <br/>
    <span class="container_units">miles</span>
  </div>
</div>

<hr>
<!-- Flex-Box Solution -->
<div class="flex_container">
  <span class="flex_container_number">1,000</span>
  <span class="flex_container_units">miles</span>
</div>

Answer №8

If you want to achieve this layout, the best approach is to utilize Flexbox. However, if you prefer not to use Flexbox, you can apply the following styles to the .units element: text-align: center, width: 100%, and top: 62%.

div.div1 {
  height:200px;
  width:200px;
  background-color:orange;
  position: relative;
}

span.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.units {
  margin: 0 auto;
  position: absolute;
  top: 62%;
  left: 0;
  text-align: center;
  width: 100%;
}
<div class="div1">
   <span class="number">1,000</span>
   <br/>
   <span class="units">miles</span>
</div>

I opted for a top value of 62% after some experimentation. Feel free to adjust this value if you find that the spacing between the value and unit is too close or too far apart.

Edit:

To achieve a more flexible and responsive layout without hardcoding values like 62%, consider using Flexbox:

div.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

span.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
}
<div class="div1">
   <span class="number">1,000</span>
   <span class="units">miles</span>
</div>

The unnecessary <br> tag has been removed. Remember to use <br> tags only within <p> elements.

Answer №9

For a solution that works across all browsers, consider avoiding Flexbox as it may not be fully supported in some cases. 

div.div1 {
    height: 200px;
    width: 200px;
    background-color: orange;
    position: relative;
    text-align:center;
}

span.number {
    font-family: Verdana;
    padding-top: 33%;
    display: block;
    font-weight: 600;
    font-size: 36px;
}

span.units {
    margin: 0 auto;
}
<div class="div1">
  <span class="number">1,000</span>
  <span class="units">miles</span>
</div>

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

Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i ...

cssbootstrap-4html-inputform-control

utilize javascript to style iframe from an external domain without access to its DOM structure

I have two websites, example.com and example1.com. I'm trying to display the content of example1.com within an iframe on example.com. For instance: Add this code to example.com: <iframe src='http://example1.com'> Then add the follow ...

javascriptjqueryhtmlcss

jQuery: extracting unique content from DOM elements using filter/get/select techniques

After retrieving an XML document using AJAX, I'm faced with the challenge of filtering out duplicate <category> elements based on their unique HTML content. In the XML data, there are four <category> elements: 2 x DVR, 1 x Alarms, 1 x Bull ...

javascriptjqueryhtmlajaxxml

Tips for making a bookmark for your iframe content

Within this HTML code, there is a list element with the ID "about_ma" and an iframe named "page" that is initially hidden. <div id="navigation"> <ul id="nav"> <li id="about_ma"><a href="index1.php?name=about.php">Ab ...

javascriptphpjqueryhtmliframe

Incorporating a wide banner with seamless responsiveness using Bootstrap framework

I'm currently working on customizing a bootstrap template to incorporate a full-length 1200 px banner at the top, in place of the smaller 120 x 60 images/logo-company.png logo that is featured on the original website. My attempts so far have been uns ...

htmlcsstwitter-bootstrapresponsive-designbanner

Adjust my loop based on the name of the weekday in PHP

I am currently working on developing a calendar feature. I have created a custom loop that includes all the days of the week in an array. After determining the total number of days in a specific month, my loop counts from 1 to the total number of days. &l ...

phphtmlloopscalendarhtml-table

Strategies for optimizing PPI and DPI in responsive design

Imagine having two monitors: one 15.5 inches with a resolution of 1920 x 1080 and the other 24 inches with the same resolution. The first monitor has a pixel density of around 72 PPI, while the second has around 90 PPI. If I apply a media query in CSS for ...

javascripthtmlcss

Don't forget to include the "http://" prefix if it's missing from

Hi there! I need some help with a simple code snippet. <a href="'.$aProfileInfo['Website'].'" target="_self"> <div class="callButton">Website</div> </a> I'm facing an issue where if the user doesn&apos ...

phphttphtmlanchorhref

Is there a way to extract only the heading from a piece of text?

Is there a way to strip just the title from the following text while preserving all other HTML tags? The text contains various HTML elements, including title tags. Perhaps I can utilize the opening and closing title tags to remove the title text only. Wh ...

javahtml

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

javascriptjqueryhtmlcss

Applying CSS borders with circular corners

Can this unique border style be achieved using only CSS? https://i.sstatic.net/wMtbG.png ...

cssborder

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

javascriptcsscss-transitionsanimated-gifactivity-indicator

Trigger a function upon clicking a DOM element in Vue.js

My goal is to trigger a function whenever I click on elements in the DOM that have a specific class. Despite my efforts, the functionality doesn't seem to work, and no errors are being reported. Here's the relevant code: methods: { ...

javascripthtmlvue.jsvuejs2vue-component

The vertical-align property in CSS seems to be malfunctioning

Hi there, I'm struggling with the CSS code below: .parent { position : 'absolute'; top : '50px'; left : '50px'; width : '400px'; height : '160px'; padding : '10px'; ...

htmlcsstext-align

Obtain ID and Class details from an HTML webpage using VBA

A few months back, I developed a program in Excel VBA to extract specific information about the prices of my game collection from an HTML page. Initially, it worked perfectly fine but suddenly stopped functioning about a month ago. I'm struggling to f ...

htmlvbaexcel

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with. My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either &a ...

javascriptjqueryhtmlcss

Replaced HTML with PHP which resulted in some minor layout problems, struggling to find a solution

Visit our live site here. I am aiming to display 3 portfolio thumbnails, a divider(.png), and 3 blog thumbnails between the border-top and border-bottom areas. Each section should have a '...' button right below the far right corner. However, t ...

phphtmlcss

Crafting Components without the Need for Scrollbars

I've been facing an issue when using document.createElement() in JavaScript to create multiple elements, they don't flow down vertically on my page. Instead, once the page ends, the elements start piling up horizontally. Does anyone have a soluti ...

javascripthtmlappendchildcreateelementcreatetextnode

New ways to style Links in NextJs 13

I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...

cssreactjsnext.js

What causes the CSS width property to vary when using the display:inline property?

There is a piece of code that contains a <ul> element with the default css property display:block. Here is the code snippet: ul,li{ list-style-type:none; padding:0; /*display:inline;*/ } #parent{ width:100%; /*height:50px;*/ background-color ...

htmlcsshtml-listsdisplay