CODEWITHSUNDEEP
htmlcss
lakshmen
lakshmen

Reputation: 29094

Writing Text beside Fractions in html

I previously asked this qn:How to represent fractions in html. It was about writing the numerator and denominator in html and the solution provided allows me to write fraction in the proper format.

However, I can't write text beside it. If I write text beside it, it appears together at the top or bottom. It appears below it. I want the text to appear beside it.

The code is here:

.fraction {
  position: relative;
  width: 1em;
  font-size: 2em;
}
.numerator {
  border-bottom: 2px solid black;
  text-align: center;
}
.denominator {
  border-right: 2px solid black;
  width: 0.75em;
  text-align: center;
}

<div class="fraction">
  <div class="numerator">3</div>
  <div class="denominator">8</div>
</div>

The text appears like this:

enter image description here

Is there any solution? Any solution?

Upvotes: 0

Views: 454

Answers (5)

SHUBHAMR69
SHUBHAMR69

Reputation: 1

Use this code if you wish.

<style type="text/css">

    frac {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        letter-spacing: 0.001em;
        text-align: center;
    }
    
    frac num { /*Numerator*/
        display: block;
        padding: 0.01em;
    }
    
    frac den { /*Denominator*/
        border-top: thin solid black;
     /* Above line is for the division line. */
    }

</style>

<p>33<frac><num>1</num><den>3</den></frac> sss</p>

If you want to change font-size, then add a font-size tag inside the frac tag.

Upvotes: 0

Puspam
Puspam

Reputation: 2787

This can be achieved with just a few lines of code :

Wrap the numerator and denominator within <span> tags.
Wrap them again within a container <span>.
Then declare the container inline-block, so that it stays on a single line.
Declare the vertical-align: middle property for the container.
Add a border at the bottom of the numerator (or at the top of the denominator) so that it looks like a fraction.

Use this code :

* {
  font-size: 50px;
}

.container {
  vertical-align: middle;
  display: inline-block;
}

.numerator {
  border-bottom: 1px solid;
}
33<span class="container"><span class="numerator">1</span><br><span>3</span></span>

Also, do not put line breaks in between these tags, otherwise, there would be unnecessary spaces within the fraction, since the <span> tags are declared as inline elements.

Upvotes: 0

LTasty
LTasty

Reputation: 2008

Add div word and set CSS CSS:

.fraction {
    position: relative;
    width: 1em;
    font-size: 2em;
}
.numerator {
    border-bottom: 2px solid black;
    text-align: center;
}
.denominator {
    width: 0.75em;
    text-align: center;
}
.word{
    position:absolute;
    top:0px;
    line-height:2.5em;
    left:1em;
}

HTML:

<div class="fraction">
    <div class="numerator">3</div>
    <div class="denominator">8</div>
    <div class="word">HI</div>
</div>

https://jsfiddle.net/e9nc6gna/1/

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 2031

add these css -

.fraction {
    display: inline-block;
    vertical-align: top;
}

working fiddle - http://jsfiddle.net/et2Lan5k/

Upvotes: 0

Nidrax
Nidrax

Reputation: 370

Set .fraction class display property as inline-block. I guess you also will have to fiddle with its vertical-align prop.

Upvotes: 1

Related Questions