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，请确保引导导航栏类似于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让我大笑......你应该考虑一些普通的家务管理。

无论如何......你可以在元素本身上使用position: absolute将一个元素完美地置于另一个元素中，并且在你想要居中的父元素上除了static之外的任何东西 - 诀窍是把孩子放在从顶部开始50％，然后translate开始50％：

＆＃13;

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

＆＃13;

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

＆＃13;

这可行的原因是因为translate（和translateX / translateY）是相对于子尺寸计算的，而top（和其他位置属性）是相对于父母的身高。

如果您的元素具有固定的高度，则可以使用否定的margin-top代替translate来获得更好的向后兼容性（极度过时的浏览器可能不支持transform）：

＆＃13;

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

＆＃13;

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

＆＃13;

带有移动导航按钮的垂直对齐播放按钮

3 个答案: