Centralize Arabic symbol characters

Is it possible to center the symbols that by default go above characters such as مُحَمَّد?

.wrapper {
  text-align: center;
  vertical-align: center;
}

span {
  font-size: 4rem;
  display: inline-block;
  padding: 2rem;
  margin: 0.2rem;
  background: pink;
}
<div class="border border-5 border-primary rounded text-white text-center p-2">
  <div class="wrapper mb-4 bg-primary text-white text-center">
    <span class="bg-dark"> َ</span>
    <span class="bg-dark"> ْ</span>
    <span class="bg-dark"> ُ</span>
  </div>
</div>

I attempted:

.wrapper,
span {
    display: flex;
    align-items: center;
}

Unfortunately, this approach did not work.

I also experimented with placing each symbol inside an additional span with 

position: absolute; top: 50%; transform: translateY(-50%);
, but that too proved unsuccessful.

csstwitter-bootstrapbootstrap-5

Answer №1

I found it quite intriguing to tackle this challenge. It appears that Arabic characters have a width of 0.

So, in order to center them horizontally (using the text-align property), you need to add something to give them width. I opted to use the &nbsp; character for this purpose.

[Centering Horizontally with text-align]

<span class="bg-dark">
     َ&nbsp;
</span>
<span class="bg-dark">
     ْ&nbsp;
</span>
<span class="bg-dark">
     ُ&nbsp;
</span>

Vertically, these characters appear to take up more space than expected (possibly due to their usage in the Arabic language). To address this issue, I surrounded the span tags with another div. This not only eliminates the need for using &nbsp;, but also ensures that the background color of the div and span tags match (or you can make the background-color of the span tags transparent). Then, by setting the height property of the Arabic characters to reduce their height, you can utilize the new div to position the elements both vertically and horizontally (utilizing flexbox).

[Centering Horizontally and Vertically with flexbox]

.wrapper {
  height: 50px;
  padding: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: pink;
}

span {
  font-size: 4rem;
  height: 23px;
}
<div class="border border-5 border-primary rounded text-center p-2">
  <div class="bg-primary text-white d-flex justify-content-center" style="gap: 20px">
    <div class="wrapper bg-dark">
      <span class="bg-dark">
        َ&nbsp;
      </span>
    </div>
    <div class="wrapper bg-dark">
      <span class="bg-dark">
        ْ&nbsp;
      </span>
    </div>
    <div class="wrapper bg-dark">
      <span class="bg-dark">
        ُ&nbsp;
      </span>
    </div>
  </div>
</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

Using jQuery to define active or hover background images

I'm currently working on a list containing 5 items, with the first one active by default (thanks to jQuery adding a 'active' class). Each item has its own background image. When I click on any of the list items, another div gets updated with ...

jquerycssevents

I am experiencing an issue where the tooltip does not appear when I click the icon. What adjustments can be made to the code to ensure that the tooltip

I have created a feature to copy abbreviation definitions when the clipboard icon is clicked. A tooltip displaying 'Copied' should appear after clicking the icon, but for some reason, it's not visible. Here's the code: $(document).re ...

javascripthtmlcsstooltip

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar

HTML5 CSS and Rails theme

I am currently utilizing a free HTML5 template found at this URL: Despite my efforts, I am unable to successfully implement the background images from the main.js file (bg01.jpg, bg02.jpg, bg03.jpg). How should I correctly reference these image files wit ...

cssruby-on-railshtml

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

htmlcss

The minimum height increases as the inner divs expand

Can you help me with the code below? html <div class="content"> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> ...

htmlcss

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle): <style> ul{ list-style-type: none; } li{ display: block; margin: 0; padding: 10; border-top: 1px d ...

htmlcss

Is it possible for me to utilize a validation function to display error messages within a specific span id tag?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

javascriptjqueryhtmlcss

Struggling to properly close the bootstrap tags

Having an issue where I can't seem to properly close Bootstrap tags in my code. Here's a snippet of the HTML: <html> <head> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.js ...

htmlcsstwitter-bootstrap

Is there a way to prevent navbar links from wrapping when closed with CSS?

Upon closing my side navbar, I encountered an issue where the links warp to the size of the navbar. I am seeking a solution to keep the links (highlighted in pink in the image below) the same size without warping. Is there a CSS technique to achieve this? ...

htmlcssnavbar

Why do my padding and font size fail to match the height of my container?

When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someo ...

htmlcss

What is the solution for the error "At-rule or selector required" ?

Can someone help me with my CSS code issues? I'm having trouble on the first and last lines. Total newbie here :) Error Messages: at-rule or selector expected (ln 1, Col 1) at-rule or selector expected (ln 51, Col 1) &bso ...

css

Manipulating parent based on first child using CSS

Is it possible to manipulate the parent element using CSS based on the presence of a specific child? For instance, I want to style a table cell differently if the first child within it is a link. <td>Hello</td> <td><a href="go.html"& ...

css

Tips for creating a responsive container for mobile and smaller devices using Bootstrap 3

Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

javascriptjqueryhtmlcssplugins

The CSS does not display properly on iPad or mobile devices

Recently, I had the opportunity to design a website for a local music school. This project was a great learning experience that has shown me the importance of continuous improvement and practice. Check out the site here Initially, I wanted to make the w ...

cssipad

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want ...

css

Trouble with Fancybox 2 and CSS classes not applying correctly

Despite my previous successful experiences with fancybox, I am currently facing an issue where the CSS styling is not being applied as expected. The large images appear grouped correctly, but without any styling, causing them to shift to the right after ap ...

jquerycssfancyboxfancybox-2

Naming conventions for initial layout DIVs: Best approaches

As a beginner in the realm of website design, I find myself at the early stages of constructing an HTML/CSS site based on a sketch I've created. In planning out the DIVs for the homepage, I am faced with questions about how to label them and determine ...

htmlcss