[HELP] [Roll Template] Center .inlinerollresult in td

Is there a way to auto-center .inlinerollresult elements in a td element?  I can set the padding and/or margins to center it for 2 digits, but it looks wierd when it rolls a 1 or 3 digit number (rolling a d%).  All the normal tricks I know for centering something don't seem to be working.

If the roll result is the only thing in the td, then text-align:center should work if you put it on the td, not the roll. In your html, something like: <td class="sheet-center">{{roll}}</td> and in CSS: .sheet-rolltemplate-name td.sheet-center { text-align:center; } I'm using this exact technique in a sheet I'm creating right now.

I tried that and it didn't work.  :-/  Even going over the calculated css tab in Chrome it's saying that it SHOULD be centered but it isn't.  I had some success with display: block;margins:auto, but that just resizes the circle when the number gets to 3 digits.

"Resizes the circle?" Anyway, tables are sometimes just weird, and moreover inconsistent across browsers. I tend to not use tables for that reason. You might have to  reimplement the layout using divs+display:grid or display:flex instead.

I have 2 rolls, each taking up half of a circle (skill roll on the left half, skill proficiency on the right half) for a Heroes Unlimited sheet I'm working on.  I've got their border radii and margins set so they fit together like 2 halves of a circle.  When one of the numbers reaches 3 digits, it stretches out it's half of the circle.

I've got it to the point it will stay centered now, but it's still stretching the td element when new digits are added.

This looks really cool! Anyway, tables and precise layout just don't fit together well. I would definitely use flex here so you have more precise control over the dimensions of everything.

I'm guessing  that the div element for the circle half is set to be something like width:auto. Try setting the width to a defined size (may need to also specify a max-width). EDIT: Also, seconding Jakob's recommendation of flexbox or css grid. I personally prefer grid, but they both have their places.

I'll give those ideas a try after I get home.  Leaving the office here in a few minutes.  I'm fine with abandoning tables.  I tried a top/bottom circle but apparently negative margins on tables don't behave like they do on other elements.  :-/

Thanks for the help! I got the top/bottom split working as intended now.  The left/right split still needs some work, but mostly because I set some properties at too high of a level in the LESS and it just needs to be restructured a bit. .sheet-rolltemplate-skillcheck {     width: 100%;     height: 100%;     clear: both;     & > div {         width: 100%;         height: 50px;         display: flex;         margin-top: 5%;         .sheet-round {             width: 20%;             height: 50%;             border-radius: 50%;             background: @black;             color: @white;             position: relative;             z-index: 10;             p {                 margin-top: 8%;                 margin-left: -3%;                 text-align: center;             }             .inlinerollresult {                 font-size: 150%;             }             &-left {                 border-radius: 100px 0 0 100px;                 height: 100%;             }             &-top {                 border-radius: 100px 100px 0 0;                 margin-left: -10%;             }             &-right {                 border-radius: 0 100px 100px 0;                 height: 100%;             }             &-bottom {                 border-radius: 0 0 100px 100px;                 margin-left: -20%;                 margin-top: 50%;             }         }         .sheet-success {             background: green;         }         .sheet-fail {             background: red;         }         .sheet-skillname {             background: @darkBlue;             color: @white;             margin-left: -10%;             width: 100%;             text-align: center;             margin-top: auto;             margin-bottom: auto;             height: 70%;             position: relative;             z-index: 0;             font-size: 1em;             border-radius: 50px;             div {                 height: 100%;                 vertical-align: middle;                 display: flex;                 align-items: center;                 p {                     font-weight: bold;                     margin-left: 10%;                     margin-top: 0;                     margin-bottom: 0;                     width: 80%;                     text-align: center;                 }             }         }     }     .inlinerollresult {         background: none;         border: none;         color: white;         font-size: 60%;     } } <rolltemplate class="sheet-rolltemplate-skillcheck">     <div>         {{#^rollGreater() skillRoll skillTarget}}         <div class="sheet-round sheet-round-top sheet-success"><p>{{skillRoll}}</p></div>         {{/^rollGreater() skillRoll skillTarget}}         {{#rollGreater() skillRoll skillTarget}}         <div class="sheet-round sheet-round-top sheet-fail"><p>{{skillRoll}}</p></div>         {{/rollGreater() skillRoll skillTarget}}         <div class="sheet-round sheet-round-bottom"><p>{{skillTarget}}</p></div>         <div class="sheet-skillname">             <div class="sheet-centerText sheet-skillTitle"><p>{{skillName}}</p></div>         </div>     </div> </rolltemplate>

congrats

Looking good!