Question 44183 in Html Question posted in
Some basic documentation can be found here.

Want to put App Star Rating code cause Horizontal Issue – Html

I am trying to implement this code to put start rating in front of app ,

<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>
</head>
<body>

<h2>Star Rating</h2>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>

</body>
</html>

after implementation everything is working but STARS Showing Vertically. How to align Horizontally.

This is may site ::https://mksapk.com/

Thanks

I tried many solution but didn’t work for me .

like text-align:center; align:center;
margin 0, auto;

etc

Tags:

2

Answers


  1. 0

    These stars should be centered by default, because span is inline tag, but maybe you have changed its behavior by some other CSS rules.

    You can wrap HTML responsible for stars in some div:

    <div class="center">
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
</div>

    and center stars with flexbox rules:

    .center {
  display: flex;
  justify-content: center;
  align-itmes: center;
}
    Login or Signup to reply.
  2. 0

    I would go with the flex approach. Although there is another alternative.
    You can make the stars inline-block so that they take place next to each other.

    .fa.fa-star {
    display: inline-block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search