Question

我需要垂直居中两个不同高度的左浮动和右浮动内嵌块。我的代码如下：

HTML：

<script type="text/javascript">
  $(document).ready(function() {
/****OCR*******/
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
    var $container = $('div#alex_platformbundle_seance_exercice_serie_series');


    // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement

    var index = $container.find(':input').length;


    // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.

    $('#add_category').click(function(e) {
        //$('#alex_platformbundle_exercice_series_0_exercice').val("1");

        //$('#alex_platformbundle_seance_exercice_serie_series_0_exercice').val(2);
      addCategory($container);
      //i=index-1;
      test = "#alex_platformbundle_seance_exercice_serie_series_"+index+"_exercice";
        $(test).val(idEx);



      e.preventDefault(); // évite qu'un # apparaisse dans l'URL

      return false;

    });


    // On ajoute un premier champ automatiquement s'il n'en existe pas déjà un (cas d'une nouvelle annonce par exemple).

    if (index == 0) {

      addCategory($container);

    } else {

      // S'il existe déjà des catégories, on ajoute un lien de suppression pour chacune d'entre elles

      $container.children('div').each(function() {

        addDeleteLink($(this));

      });

    }


    // La fonction qui ajoute un formulaire CategoryType

    function addCategory($container) {

      // Dans le contenu de l'attribut « data-prototype », on remplace :

      // - le texte "__name__label__" qu'il contient par le label du champ

      // - le texte "__name__" qu'il contient par le numéro du champ

      var template = $container.attr('data-prototype')

        .replace(/__name__label__/g, 'Serie n°' + (index+1) +" : "+ nameEx )

        .replace(/__name__/g,        index)

      ;


      // On crée un objet jquery qui contient ce template

      var $prototype = $(template);


      // On ajoute au prototype un lien pour pouvoir supprimer la catégorie

      addDeleteLink($prototype);


      // On ajoute le prototype modifié à la fin de la balise <div>

      $container.append($prototype);

     test = "#alex_platformbundle_seance_exercice_serie_series_"+index+"_exercice";
    $(test).val(idEx);
      // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro

      index++;

    }


    // La fonction qui ajoute un lien de suppression d'une catégorie

    function addDeleteLink($prototype) {

      // Création du lien

      var $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');


      // Ajout du lien

      $prototype.append($deleteLink);


      // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie

      $deleteLink.click(function(e) {

        $prototype.remove();


        e.preventDefault(); // évite qu'un # apparaisse dans l'URL

        return false;

      });

    }

/**************/

  });
</script>

CSS：

<div id="wrapper">
  <div id="right">
  <div id="control-1"><a href="">ok</a></div>  
  <div id="control-2"><a href="">cancel</a></div>
  </div>
  <div id="left">
    <div id="title">Title</div>  
    <div id="description">Description</div>
  </div>
</div>

您可以在jsfidle.net

上看到结果

如何垂直对齐控件＆＃34;确定＆＃34;和＆＃34;取消＆＃34;？

Answer 1

你可以切换到flex而不是float，并可以像这样轻松调整对象：

＆＃13;

/* added this code */
#wrapper {
 display:flex;
 justify-content:space-between;
 align-items:center; /* align vertically*/
}
/**/
#wrapper #left #title {
  font-family: Tahoma, Helvetica, Arial, "Trebuchet MS", Verdana, sans-serif;
  font-size: 18px;
  color: #000000;
}

#wrapper #left #description {
  font-family: Tahoma, Helvetica, Arial, "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  color: #797979;
}


#wrapper #right {
  font-family: Tahoma, Helvetica, Arial, "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  color: #797979;
  order:2; /*adjust order to make this one come in the right*/
}

#wrapper #right #control-1,#wrapper #right #control-2 {
  display: inline-block;
}

＆＃13;

<div id="wrapper">
  <div id="right">
    <div id="control-1"><a href="">ok</a></div>
    <div id="control-2"><a href="">cancel</a></div>
  </div>
  <div id="left">
    <div id="title">Title</div>
    <div id="description">Description</div>
  </div>
</div>

＆＃13;

如何垂直居中两个不同高度的左浮动和右浮动直列块？

1 个答案: