Center text according to length

Question

Center text according to length

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm having a hard time putting together a logic, where it will write the user name in a certificate.

In order to always be centralized according to length of name, I have to adjust to margem-left , but it is allowed from 1 to 50, to always be dynamic, I would have to do 50 If or 50 case .

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

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

The idea is to centralize the text accordingly to decrease / increase the size of the name, based on the position of the word Congratulations Example name having between 0 and 10% of length

Nameexamplethatisbetween50+length

codefollows.

functioncertificado(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();
                    }
                });

            }

javascript html css

asked by anonymous 08.06.2018 / 22:29

2 answers

1

Take the total width of the certificate subtracts the width of the text, and divide the result of the subtraction equally into each% of the text%

.

08.06.2018 / 23:24

Error using FuelPhp in version 7 Data classification of network attacks (attack or non-attack)

score 1 · Accepted Answer

As I understand it, you're making things a bit difficult when you could simply insert text into a 100% width element and use text-align: center; to leave the text always centered regardless of the text size.

I suggest to remove all these if s and leave only one line, change span to div , remove 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();
     }
 });

}