Bouton d'alignement vertical avec bouton de navigation

Question

Je veux aligner verticalement et aligner = "droite" le bouton de lecture avec le bouton du menu de la barre de navigation - celui avec les trois barres. Vous pouvez voir le site ici m.vtxfactory.org - essayez de voir avec une résolution inférieure.

Voici le code que j'ai utilisé pour une solution temporaire, mais il ne change pas comme il le devrait lorsque j'essaie de voir le site dans différentes résolutions.

<nav class="navbar navbar-inverse" style="z-index: 1000000000000000000;background-color: #000;position: fixed;width: 100%;"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button style="margin-right: 15px;z-index: 1000000000000000000000000000" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span>       
 
      </button> 
 
      <a href="#topp1" id="anchor0" class="anchorLink"><img src=images/vtxfactorylogo.png style="margin:8px;padding-left:-5px;max-width:50%;max-height:80px;" alt="main logo of website, vtx factory, vtxfactory.org, vtxfactory, business solutions, web design, audio production, 3d rendering, web development, html, css, javascript, jquery, web hosting, design, view more graphic, view more design, graphic design, digital, agency"></a> 
 
    <div class="align-middle col-sm-2" style="color: #fff;position: absolute;top:17%;right:7vw;"> 
 
    <audio id=myAudio></audio> 
 
    <audio id=peaks-audio preload=auto>Your browser does not support the audio element.</audio> 
 
    <button style="background-color: #000" id=idj-play-button onclick=StartOrStop() class="btn btn-lg"><i class="glyphicon glyphicon-play"></i> 
 
    </button> 
 
    <button style="background-color: #000" id=idj-pause-button onclick=StartOrStop() class="btn btn-lg hide"><i class="glyphicon glyphicon-refresh"></i> 
 
    </button> 
 
    </div> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a style="font-size: 6vw;line-height:6vw;" href="#topp1" id="anchor1" class="anchorLink">Home</a></li> 
 
      <li><a style="font-size: 6vw;line-height:6vw;" href="#featuress1" id="anchor2" class="anchorLink">Features and Plans</a></li> 
 
      <li><a style="font-size: 6vw;line-height:6vw;" href="#newsletterr1" id="anchor3" class="anchorLink">Newsletter</a></li> 
 
      <li><a style="font-size: 6vw;line-height:6vw;" href="#testimonialss1" id="anchor4" class="anchorLink">Testimonials</a></li> 
 
      <li><a style="font-size: 6vw;line-height:6vw;" href="#contactss1" id="anchor5" class="anchorLink">Contacts</a></li> 
 
      <li><a style="font-size: 6vw;line-height:6vw;" href="/policy/" target="_blank" id="anchor6" class="anchorLink">Policy</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav>

Answer 1

Je suis désolé, mais vous devez nettoyer votre code et mettre tous les CSS en ligne, s'il vous plaît assurez-vous que navbar bootstrap est similaire à la barre de navigation d'amorçage standard dans le Bootstrap 3 Navbar Docs, vient maintenant votre question, j'ai vérifié votre site Web, pouvez-vous s'il vous plaît ajouter la classe ci-dessous au bouton de lecture.

.vert-center{ 
    color: #fff; 
    position: absolute; 
    top: 50%; 
    right:7vw; 
    transform: translateY(-50%); 
} 

Avant:

<div class="align-middle col-sm-2" style="color: #fff;position: absolute;top: 50%;right:7vw;transform: translateY(-50%);"> 
<audio id="myAudio"></audio> 
<audio id="peaks-audio" preload="auto">Your browser does not support the audio element.</audio> 

Après:

<div class="vert-center col-sm-2"> 
<audio id="myAudio"></audio> 
<audio id="peaks-audio" preload="auto">Your browser does not support the audio element.</audio> 

S'il vous plaît laissez-moi savoir si cette classe résout votre problème!

Answer 2

Essayez plutôt d'utiliser flex. Il est beaucoup plus facile d'aligner les éléments verticalement en utilisant flex. Découvrez le code ci-dessous.

<div class="navbar-header" style=" 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    width: 100%; 
 
"> 
 
     <button style="order: 3;margin-right: 15px;z-index: 1000000000000000000000000000;" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <a href="#topp1" id="anchor0" class="anchorLink" style=" 
 
    order: 1; 
 
"><img src="images/vtxfactorylogo.png" style="margin:8px;padding-left:-5px;max-width:50%;max-height:80px;" alt="main logo of website, vtx factory, vtxfactory.org, vtxfactory, business solutions, web design, audio production, 3d rendering, web development, html, css, javascript, jquery, web hosting, design, view more graphic, view more design, graphic design, digital, agency"></a> 
 
<div class="align-middle col-sm-2" style="color: #fff;/* position: absolute; *//* top:17%; *//* right:7vw; */order: 2;"> 
 
<audio id="myAudio"></audio> 
 
<audio id="peaks-audio" preload="auto">Your browser does not support the audio element.</audio> 
 
<button style="background-color: #000" id="idj-play-button" onclick="StartOrStop()" class="btn btn-lg"><i class="glyphicon glyphicon-play"></i> 
 
</button> 
 
<button style="background-color: #000" id="idj-pause-button" onclick="StartOrStop()" class="btn btn-lg hide"><i class="glyphicon glyphicon-refresh"></i> 
 
</button> 
 
</div> 
 
    </div>

Il suffit de coller le code ci-dessus dans votre tête du site.

Answer 3

Je ne vais pas commenter sur votre code spécifique autre que de dire que votre z-index es m'a fait LOL ... et vous devriez vraiment envisager un ménage général. De toute façon ... vous pouvez parfaitement centrer un élément dans un autre en utilisant position: absolute sur l'élément lui-même et tout sauf static sur le parent que vous voulez centrer à l'intérieur - l'astuce consiste à mettre l'enfant à 50% du haut et puis il translate 50% jusqu'à:

.offset_parent { 
 
    height: 120px; /* doesn't matter how high it is */ 
 
    position: relative; /* anything but static */ 
 
    background: green; 
 
} 
 
.v_center { 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    background: tomato; 
 
}

<div class="offset_parent"> 
 
    <div class="v_center">Always perfectly in the middle</div> 
 
</div>

la raison pour laquelle cela fonctionne est parce que translate (et translateX/translateY) est calculée par rapport à la taille Childs, w si le top (et d'autres propriétés de position) est relatif à la hauteur des parents.

Si votre élément a une hauteur fixe, vous pouvez obtenir une meilleure compatibilité ascendante en utilisant un margin-top négatif au lieu de translate (navigateurs extrêmement obsolètes ne supportent pas transform):

.offset_parent { 
 
    height: 120px; /* doesn't matter how high it is */ 
 
    position: relative; /* anything but static */ 
 
    background: green; 
 
} 
 
.v_center { 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 50%; 
 
    height: 30px; 
 
    margin-top: -15px; 
 
    background: tomato; 
 
}

<div class="offset_parent"> 
 
    <div class="v_center">Always perfectly in the middle</div> 
 
</div>