帶移動導航欄按鈕的垂直對齊播放按鈕

Question

我想用導航欄菜單的按鈕垂直對齊和對齊=「向右」播放按鈕 - 帶有三個橫條的按鈕。您可以在這裏查看網站m.vtxfactory.org - 嘗試以較低的分辨率查看。

下面是我用於臨時解決方案的代碼，但它不能像我嘗試以不同分辨率查看網站時那樣進行縮放。

<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

我很抱歉，但你需要清理你的代碼，並把所有的內聯CSS，請確保引導NavBar是類似於Bootstrap 3 Navbar Docs標準引導導航欄，現在來你的問題，我檢查了你的網站，你可以請添加下面的類到播放按鈕。

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

前：

<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> 

後：

<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> 

請讓我知道，如果這個類解決您的問題！

Answer 2

嘗試使用flex代替。使用flex對齊元素很容易。看看下面的代碼。

<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>

只需粘貼上面的代碼到您的網站標題。

Answer 3

我不會評論你的具體代碼，而不是說你的z-index es讓我LOL ...你應該真的考慮一些一般的家務。

反正......你可以在裏面另一個元素本身和任何東西，除了static上要內線中鋒母公司的使用position: absolute完美中心一個元素 - 關鍵是從頂部把孩子在50％和然後translate它50％高達：

.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>

這工作的原因是因爲translate（和translateX/translateY）相對於孩子的尺寸計算，瓦特hil top（和其他職位屬性）是相對於父母的身高。

如果你的元素有一個固定的高度，你可以通過使用translate負margin-top，而不是獲得更好的向後兼容（非常過時的瀏覽器可能不支持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>