Center text according to length

Question

I’m having difficulty putting together a logic, where will write the user name on a certificate.

In order to always leave centered according to the length of the name, I have to keep adjusting to the margem-left, but it is allowed from 1 to 50, to always leave dynamic, would have to do 50 If or 50 case.

In that count of length, I consider the spaces between the names.

The sheet size is A4 (2480 px wide 3508 px high)

The idea is to centralize the text according to that decrease/increase the name size, based on the word position Congratulations Name example ranging from 0 to 10 length

Example of name that has between 50+ of length

follows code.

function certificado(codigo) {
                $.post("/MeusDados/ConsultarCertificados", { 'certificado': codigo }, function (data) {
                    if (data != null || data.length > 0) {
                        var nome = $("#nome").text();
                        for (var i = 0; i < data.length; i++) {
                            var html = "";
                            html += "<div id=\"printDiv" + data[i].bPlanoCodigo + "\" class=\"col-sm-10\" style=\"width: 26%;\">";
                            html += "<a href=\"#\" onclick=\"JavaScript:printPartOfPage('printDiv" + data[i].bPlanoCodigo + "')\">";
                            if (nome.length >= 50) {
                                html += "<span  style=\"position: absolute; display:none; margin-left: 30%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }
                            else if (nome.length >= 45 && nome.length <= 50) {
                               html += "<span  style=\"position: absolute; display:none; margin-left: 30%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }
                            else if (nome.length >= 40 && nome.length < 45) {
                                html += "<span  style=\"position: absolute; display:none; margin-left: 32%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }
                            else if (nome.length >= 35 && nome.length < 40) {
                                html += "<span  style=\"position: absolute; display:none; margin-left: 34%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }
                            else if (nome.length >= 30 && nome.length < 35) {
                                html += "<span  style=\"position: absolute; display:none; margin-left: 38%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }
                            else if (nome.length >= 25 && nome.length < 30) {
                                html += "<span  style=\"position: absolute; display:none; margin-left: 42%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }
                            else if (nome.length < 25) {
                                html += "<span  style=\"position: absolute; display:none; margin-left: 48%; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</span>"; 
                            }  
                            html += "<img class=\"imgCertificados\" src=\"data:image/png;base64," + data[i].bPlanoCertificado + "\"/>";
                            html += "</a>";
                            html += "</div>";
                            $("#certificado").append(html);
                        }
                        off();
                    }
                });

            }

Answer 1

From what I understand, you’re making things a little difficult when you could just insert the text into a 100% width element and use text-align: center; to always keep the text centered, regardless of the size of the text.

I suggest you remove all these ifs and leave only one line, change the span for div, remove the margin-left and add text-align: center and width: 100%:

function certificado(codigo) {
 $.post("/MeusDados/ConsultarCertificados", { 'certificado': codigo }, function (data) {
     if (data != null || data.length > 0) {
         var nome = $("#nome").text();
         for (var i = 0; i < data.length; i++) {
             var html = "";
             html += "<div id=\"printDiv" + data[i].bPlanoCodigo + "\" class=\"col-sm-10\" style=\"width: 26%;\">";
             html += "<a href=\"#\" onclick=\"JavaScript:printPartOfPage('printDiv" + data[i].bPlanoCodigo + "')\">";

             html += "<div style=\"text-align: center; width: 100%; position: absolute; display:none; font-size: 16px; margin-top: 37%; font-family: Trebuchet MS;\"\">" + nome + "\</div>"; 

             html += "<img class=\"imgCertificados\" src=\"data:image/png;base64," + data[i].bPlanoCertificado + "\"/>";
             html += "</a>";
             html += "</div>";
             $("#certificado").append(html);
         }
         off();
     }
 });

}

Answer 2

Take the full width of the certificate subtracts the width of the text, and divide the subtraction result equally into each margin of the text.