Link to home
Start Free TrialLog in
Avatar of curiouswebster
curiouswebsterFlag for United States of America

asked on

Column Names not quite centering

I have the correct columns names appearing, but have a hard time getting them to actually center on each puzzle piece.

User generated image
The CSS I created is here.

puzzle-canvas.component.css
.column-number {
    width: 12%;
    margin-top: 12px;
    float: left;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    z-index: 10;
}

Open in new window


The single line I added to the template is:

puzzle-canvas.component.html
    <div class="column-number" *ngFor="let i of columnNames" >{{ i }}</div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of curiouswebster

ASKER

Neither worked...

Margin left
User generated image
Padding left
User generated image
thanks