centrer – devfrontend.info

TODO : gérer les limites droite/gauche de la page.

Markup HTML :

<li class="js-facet">
	<div class="">
		<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn-facet">
			Shop by Prix<span class="caret"></span>
		</a>
		<div class="js-facet-values">
		</div>
	</div>
</li>

Shop by Prix<span class="caret"></span>

</a>

</div>

</li>

Code jQuery :

var facetValuesElement = $('.js-facetnav-refinements .js-facet');

// DO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu
var nav_sub_item_width = 370;
facetValuesElement.each(function() {
    var nav_primary_item_width = $(this).outerWidth();
    var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2);
    $(this).find('.js-facet-values').css({
    	'width': nav_sub_item_width+'px',
    	'margin-left': -wanted_value
    });
});

// UNDO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu
facetValuesElement.each(function() {
	$(this).attr('style', '');
});

var facetValuesElement = $('.js-facetnav-refinements .js-facet');

// DO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu

var nav_sub_item_width = 370;

facetValuesElement.each(function() {

var nav_primary_item_width = $(this).outerWidth();

var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2);

$(this).find('.js-facet-values').css({

'width': nav_sub_item_width+'px',

'margin-left': -wanted_value

});

// UNDO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu

facetValuesElement.each(function() {

$(this).attr('style', '');

});

Une variante : le menu se comporte réellement comme un tableau HTML

.menu{
    display: table;
    border-collapse: separate;
    border-spacing: 4px 4px;
}

.menu li{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 4em;
    padding: 4px;
    
    background: pink;
    border: 1px solid #000;
}

.menu li:hover{
    cursor: pointer;
    background: #fff;
}

.menu{

display: table;

border-collapse: separate;

border-spacing: 4px 4px;

}

.menu li{

display: table-cell;

vertical-align: middle;

text-align: center;

height: 4em;

padding: 4px;

background: pink;

border: 1px solid #000;

}

.menu li:hover{

cursor: pointer;

background: #fff;

}

Articles récents

Catégories

Archives

Méta

Étiquette : centrer

[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle

Une variante : le menu se comporte réellement comme un tableau HTML