How to line up text in HTML so that Unicode characters are aligned to the left and right within

Is there a way to align text on the left and right side of the same line?

I experimented with various solutions for non-Unicode text that I found here. However, when it comes to Unicode text, the two parts of the text do not align vertically:

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

<div style="width: 70px;">
  <span style="float: left;">foo</span>
  <span style="float: right;">foo？</span>
</div>

<br><br>

<div style="width: 70px; display: flex; justify-content: space-between;">
  <span>foo</span>
  <span>foo？</span>
</div>

htmlcss

Answer №1

A common issue arises when the question mark takes up more space than regular fonts, but adding line-height to your design can easily solve this problem. Hopefully, this solution helps to address the issue.

<div style="width: 70px;">
  <span style="float: left; line-height: 22px;">foo</span>
  <span style="float: right; line-height: 22px;">foo？</span>
</div>

<br><br>

<div style="width: 70px; display: flex; justify-content: space-between;">
  <span style="line-height: 22px;">foo</span>
  <span style="line-height: 22px;">foo？</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

What is the method to extract div text using Python and Selenium?

Is there a way to extract the text "950" from a div that does not have an ID or Class using Python Selenium? <div class="player-hover-box" style="display: none;"> <div class="ps-price-hover"> <div> ...

pythonhtmlseleniumweb-scraping

Rdash Angular: How to Implement a Fixed Header Position on Page Scroll

Hi there, I am currently utilizing Rdash Angular Js. I am wondering if it's achievable to keep the header position fixed while scrolling through the page. I attempted a solution using CSS as shown below, unfortunately it didn't have the desired ...

cssangularjsheader

My array magically transforms into an object once it reaches 22 elements, why is that happening? (node)

While working on a form with multiple checkboxes that have the same name and submitting it through a node/express post route, I encountered an issue. Here is the corresponding HTML code: https://pastebin.com/xeQae6GA The problem arises when trying to ret ...

htmlarraysnode.jsformsexpress

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

javascriptjqueryhtmlcsslaravel-5

Encountering the error code [$injector:unpr] regarding an unknown provider: $uibModalInstanceProvider

In my web application, I have a controller called AddPrice. This controller is invoked from a Price listing screen as a popup using the $uibModal.open method, where the controller is passed in as an argument. However, the controller is not defined within t ...

javascripthtmlangularjsangular-ui-bootstrap

Styling a table in CSS to have top and bottom borders

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1 ...

htmlcss

Utilizing a URL to dynamically update the content within an I-Frame

One day, I made the questionable decision to use i-frames to load pages on my website in order to keep a sidebar on the main page without having to constantly make changes. In hindsight, I should have done the opposite and put the sidebar in the i-frame. N ...

javascripthtmlweburliframe

Can I get the audio download for ReCaptcha?

I'm seeking guidance on what I might be doing incorrectly Referring to the code provided in: How to interact with the reCAPTCHA audio element using Selenium and Python My goal is to obtain the src file for the audio to download it. To achieve this, ...

pythonhtmlpython-3.xselenium

What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue. The Bootstrap 5 .g-0 ...

htmlcssbootstrap-5

The html element is failing to adjust its height to match the entirety of the browser window, even when set to

After inspecting my HTML element, I noticed that it isn't occupying 100% of the browser view, even though I have set the height to 100% in my CSS file. I tested it in both Chrome and Firefox, and the issue persists. I suspect that the browser is addin ...

htmlcss

I am having trouble getting my divs to show up side by side in one line

I am struggling to get the second div (right-column) to move next to the first div (left-column) in order to create 2 columns of links. I would prefer not to create a separate stylesheet for this small page. <div class="container" style="height: 700px; ...

htmlcss

Opacity Vertical Gradient Text Design

Currently exploring various methods in CSS3, jQuery, SVG, or canvas to achieve a specific effect, but encountering some challenges along the way. Key considerations to take note of: The text gradient is vertical with opacity The text could span multiple ...

jquerycsstextsvggradient

What is the best way to present both paragraphs and images from a div in a sequential order

Currently, I am developing a compact web tool to assist editors in creating content by utilizing buttons to insert paragraphs and images. The elements are saved with an ID (beginning at 0 and increasing for each new element) and can be previewed in a div n ...

javascripthtmlcss

Implementing a see-through layer using CSS

This part of my site features a background image. I am attempting to add a transparent overlay at the top of this section, as indicated by the red highlight. I want to achieve this effect using CSS without directly applying the overlay to the image. The re ...

htmltwitter-bootstrapcss

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...

javascriptjqueryhtmlcss

Struggling to line up three images with linked attachments in a single row using Bootstrap 4

Currently tackling my portfolio for a school project, I find myself stuck on organizing my projects in a single line. Here is the code snippet that's giving me trouble... <div class="container"> <div class="row"> <div class= ...

htmlcssbootstrap-4

Exploring Material-UI: Leveraging makeStyles and CSS-In-JS for customizing library component styles

I'm currently utilizing Material-UI to construct a form using makeStyles and CSS-In-JS for styling purposes. I have a form component from the Material-UI library that I want to style according to my needs. My main focus is on how to address classes or ...

cssreactjsmaterial-uireact-hookscss-in-js

Utilize JavaScript to load an external script at the bottom of the body for improved website performance

On my website, I am utilizing the Mobile ESP script to determine whether visitors are accessing it from a mobile device or desktop. Depending on the type of device, I dynamically load the necessary scripts and CSS stylesheets for optimal navigation. Howev ...

javascriptjqueryhtmlcss

JavaScript - Hover function not functioning properly

Having some difficulty with the .hover() function I am fetching dribbble shots that are displayed on page load. However, I am experiencing issues when trying to add a class via hover on these shots. Interestingly, the hover functionality works perfectly ...

jqueryhtml

What is the deal with CSS relative magnification?

I am currently utilizing a PHP styleswitcher along with alternate stylesheets in an attempt to replicate the functionality of browser zoom (done using keyboard shortcuts cmd-plus or ctrl-plus). At the moment, when clicking on the "zoom in" graphic, it is ...

csszooming