1

I have the following code on my page:

.fraction {
  vertical-align: middle;
  display: inline-block;
}
.frtop, .frbottom {
  text-align: center; 
}
.frbottom {
  border-top: 1px solid;
}
<p style="text-indent: 2em;">
The fraction
<div class="fraction">
  <div class="frtop">1</div>
  <div class="frbottom">20000</div>
</div>
equals to 0.00005.
</p>

where I am trying to display an inline fraction in an indented paragraph.

However, the fraction is displayed on a separate line: There is a line break between the text The fraction and the fraction itself. How can I fix this?

Note 1: This problem does not occur if I use div instead of p to define my whole paragraph; however, in this case I have to add text-indent: 0; in the CSS code of the .fraction definition and the content does not seem semantically correct to me: I do want to use p to define all my paragraphs.

Note 2: Obviously, I have to replace div with span. However, I need some extra things in the CSS code I provided, so that it works.

FedKad
  • 493
  • 4
  • 19
  • 1
    `div` elements are not allowed to be children of `p` elements. In order to "fix" this invalid HTML, the browser automatically closes the open `p` tag when it encounters the starting `div` tag. This is visible if you inspect the element with devtools. – Sean Mar 30 '21 at 18:24
  • 1
    To those who closed the question: This question is not about what can be put inside `

    ...

    ` tags. It is about ***the necessary CSS code***, so that a fraction can be displayed _inline_ using the tags `...`.     – FedKad Mar 31 '21 at 07:34
  • 1
    Agreed. It was unilaterally closed by one user. I've voted to reopen. – Sean Mar 31 '21 at 13:51

1 Answers1

1

Try this :

.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-indent: 0;
  vertical-align: middle;
}
.frbottom {
  border-top: 1px solid;
}
<p style="text-indent: 2em;">
The fraction
<span class="fraction">
 <span>1</span>
 <span class="frbottom">20000</span>
</span>
equals to 0.00005.
</p>

Considering the fraction is a part of the paragraph, it shouldn't be in a div anyway.

Edit:

The flex element allows you to display the content either as a row or a column. It's pretty useful for changing classic display. Since .fraction is in flex, you need align-items to put the content in the middle.

For more information on flex, I would suggest this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. This is a very good explanation; much better than everything I could write here :) .

FedKad
  • 493
  • 4
  • 19
cecile
  • 293
  • 1
  • 4
  • 17
  • Thanks for the answer. I am adding `vertical-align: middle;` to `.fraction` CSS to align it properly vertically. However, I would highly appreciate if you give some short explanation about the "flex" stuff. – FedKad Mar 30 '21 at 18:22