is there a way to center align this span element without affecting how the element renders?

Question

I'm rendering rating stars using this and I need to center all the elements of my html page, including the stars. The page will look like this:

Problem is, when I use <center> or <style="text-align: center;"> the stars end up looking like this:

code:

<center>
  <span class="stars">4</span>
</center>

result:

Is there a way to center the span class without affecting how it renders? I tried using margin-left/right but they look pretty bad when I change the size of the browser/use it on a phone.

What it is:

What I want:

you want it to center in the div? – Shadow Fiend Sep 12 '17 at 03:01 — Shadow Fiend, Sep 12 '17 at 03:01

score 1 · Accepted Answer · answered Sep 12 '17 at 03:20

1

use margin: 0 auto;. It will center to its parent div..

If you want to understand more about margin: 0 auto; try this link.

answered Sep 12 '17 at 03:20

Shadow Fiend

1,829
1
9
14

should I be using this as such: 4? I'm using bootstrap so my parent div is
, I tried placing the margin in the css as well, both does not work.
– jiuwo Sep 12 '17 at 03:27
is there a reason for you to use span? if not try changing span to div.. – Shadow Fiend Sep 12 '17 at 03:33
1

if you want to use span add `display:table;` && `margin:0 auto;` – Shadow Fiend Sep 12 '17 at 03:35
I think the span class was necessary for the stars to render. `display:table;` && `margin:0 auto;` worked! thanks. – jiuwo Sep 12 '17 at 03:47
@Chris I'm glad i was able to help.. happy coding.. :) – Shadow Fiend Sep 12 '17 at 03:49

score 0 · Answer 2 · answered Sep 12 '17 at 03:08

0

It's hard to answer without more information about context and what you're trying to do, but have you tried using CSS rather than HTML tags?

.stars { text-align: center }

answered Sep 12 '17 at 03:08

Aldorath

33
9

just tried this, similar results to using html tags – jiuwo Sep 12 '17 at 03:11

is there a way to center align this span element without affecting how the element renders?

2 Answers2