0

So I have a volume slider in a chrome extension that has 3 <p> tags above it, one with float: left, one with text-align: center, and one with float: right. The expected outcome would be something like [0% 100% 500%], yet it has this weird bump where the 100% is, as shown below.

enter image description here

Here's the code that relates to this part:

index.html

    <p style="float: left;">0%</p>
    <p style="float: right;">500%</p>
    <p id="amount">100%</p>

style.css

#amount {
    text-align: center;
}

I am frankly at a loss with this. Any help appreciated.

Koto
  • 430
  • 4
  • 19
  • Does this answer your question? [CSS: Left, Center, & Right Align Text on Same Line](https://stackoverflow.com/questions/13694062/css-left-center-right-align-text-on-same-line) – Kundan Jun 25 '21 at 06:09

3 Answers3

0

Floats are a headache, but if you really want to use it you'd have to float everything.
(I strongly advise you to use flexbox or grid for this type of layout.)

Here's an example without changing your html order:

.left {
  width: 25%;
  float: left;
}

.right {
  width: 25%;
  float: right;
  text-align: right;
}

.center {
  float: left;
  width: 50%;
  text-align: center;
}
<p class="left">0%</p>
<p class="right">500%</p>
<p class="center">100%</p>
LSE
  • 1,075
  • 1
  • 8
  • 10
0

Your center paragraph is taking the entire width of the page, specifying the width would fix the problem.

.alignleft {
  float: left;
  width:33.33333%;
  text-align:left;
}
.aligncenter {
  float: left;
  width:33.33333%;
  text-align:center;
}
.alignright {
 float: left;
 width:33.33333%;
 text-align:right;
}
<p class="alignleft">0%</p>
<p class="aligncenter">100%</p>
<p class="alignright">50%</p>
Kundan
  • 1,754
  • 16
  • 37
0

I hope this will help you try this:

.flex{
    display: flex;
    background-color: #181818;
}
.zero{
    width: 33.33%;
}

.five{
    width: 33.33%;
}

.one{
    width: 33.33%;
}

.zero p{
    text-align: center;
    color: white;
}

.five p{
    text-align: center;
    color: white;
}

.one p{
    text-align: center;
    color: white;
}
<div class="flex">
  <div class="zero">
    <p>0%</p>
  </div>
  <div class="five">
    <p>500%</p>
  </div>
  <div class="one">
    <p>100%</p>
  </div>
</div>