色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

能& # 39；t在二級矩形自定義CSS類上垂直對齊文本

CSS
林雅南2年前8瀏覽0評論

所以我試著在google的appscript上用HTML和CSS創(chuàng)建一個層次圖。在圖中，大矩形代表層次結(jié)構(gòu)的第1層，小矩形代表第2層。級別2小矩形必須位于它們所屬的級別1大矩形的正下方。除了較小的矩形(在CSS類level-2-rect中定義)中的文本沒有在框的中心垂直對齊，而是水平對齊，其他一切似乎都很好。以下是完整的代碼:

function DibujarJerarquia() {
  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Taxo");
  var data = sheet.getRange("A2:F600").getValues().sort(function(a, b) {
    // Sort based on the first column
    return a[0].localeCompare(b[0]);
  });

  var valoresUnicos = new Set();
  var textHTML = ' <meta charset="UTF-8"> \
  <title>Hierarchy Diagram</title>\
  <style>\
    /* Styling for the diagram */\
    .diagram {\
      display: flex;\
      justify-content: center;\
      display: grid;\
      grid-template-columns: auto auto auto;\
      padding: 10px;\
    }\
    \
    .level-1-container {\
      margin: 30px;\
      display: flex;\
      flex-direction: column;\
      align-items: center;\
      vertical-align: middle; \
    }\
    \
    .level-1-rect {\
      width: 400px;\
      height: 50px;\
      border-radius: 10px;\
      background-color: #0077B5;\
      display: flex;\
      align-items: center;\
      justify-content: center;\
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); \
      font-size: 22px; \
      font-family: Arial; \
      color: white \
    }\
    \
    .level-2-container {\
      display: flex;\
      flex-wrap: wrap;\
      width: 400px;\
      justify-content: center;\
      align-items: center;\
      column-gap: 3%; \
      row-gap: 10px; \
      vertical-align: middle; \
    }\
    \
    .level-2-rect {\
      width: 110px;\
      height: 40px;\
      background-color: #F4F8FF;\
      text-align: center;\
      vertical-align: middle ; \
      align-items: center;\
      margin: 2px;\
      border-radius: 5px;\
      font-size: 12px;\
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); \
      font-family: Arial; \
      background-color: #7AC5FE;\
      color: white \
    }\
    br { \
     display: block; \
     content: ""; \
     margin-top: 7px; \
    }\
   </style>\
   </head>\
  <body>\
  <div class="diagram">';

  for (var i = 0; i < data.length; i++){
    var valor = data[i][0];
    if (valor !== "") {
      if (!valoresUnicos.has(valor)) { // Verificar si el valor ya existe en el conjunto
        valoresUnicos.add(valor); // Agregar el valor al conjunto si no existe
        textHTML = textHTML + '<div class="level-1-container"> \
         <div class="level-1-rect"> \
         <span>' + valor  + '</span> \
         </div><br>\
         <div class="level-2-container">';
         
        for (var j = 0; j < data.length; j++) {
          if (valor == data[j][0]) {
           var valor_dos = data[j][2];
           if (valor_dos !== "") {
            if (!valoresUnicos.has(valor_dos)) { // Verificar si el valor ya existe en el conjunto
               valoresUnicos.add(valor_dos); // Agregar el valor al conjunto si no existe
               textHTML = textHTML + '<div class="level-2-rect"><span>' + valor_dos + '</span></div>';
              }
            }
          }
        }
        textHTML = textHTML + '</div> \
                </div>';
      }
    }
  }
   
  textHTML = textHTML + '</div>\
  </body>\
  </html>';

  var htmlOutput = HtmlService.createHtmlOutput(textHTML);


  htmlOutput.setWidth(10000).setHeight(700);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Mapa Nivel 1 y 2 de Taxonomía');

  


}

我已經(jīng)嘗試添加了幾乎所有能夠?qū)崿F(xiàn)這一功能的屬性，比如:

文本對齊:居中； 垂直對齊:居中； 對齊-項目:居中； 但是似乎沒有任何東西可以對齊文本框中間的文本。