Question

我尝试对齐按钮，使其保持在菜单栏的中心位置。 jsfiddle会告诉你我的意思。

这似乎不起作用：

vertical-align: middle;

以下是代码：jsfiddle！

Answer 1

不幸的是，垂直对齐是HTML / CSS中更难处理的事情之一，具体取决于具体情况。

但是，如果您不想使用绝对高度并且必须将其垂直居中，则始终可以将显示更改为表格，而不是阻止：display: table;

我编辑了a working example的原始jsfiddle。

我添加了/* Comments */我添加或更改了CSS。

Answer 2

节省一些时间并尝试使用bootstrap。

这是您可以使用的CSS：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

但如果您花一点时间并转到此链接，您可以找到完整的详细解决方案：

https://css-tricks.com/centering-css-complete-guide/

Answer 3

在下面添加到您的句柄类 https://jsfiddle.net/420qk42v/2/

text-align:center;

Answer 4

  .handle {
  width: 100%;
  background-color: #ffe2e2;
  font-family: "century gothic";
  opacity: 0.9;
  box-sizing: border-box;
  padding: 10px 5px;
  cursor: pointer;
  display: block;
  text-align: center;  /* this is the change */
  }

这是你的意思吗？

Answer 5

我使用垂直对齐进行了测试，如果删除菜单按钮上的绝对定位，它就会起作用。

我还在文本＆＃34;菜单＆＃34;周围创建了一个新的div。然后将其设置为绝对位置，同时设置手柄以使文本向右对齐 - 按钮只会向右移动。

<强> HTML

</br>
</br>
</br>
<nav>
    <div>
        <div class="handle">
            <!--<div class="heading">MENU</div>-->
            <!-- Menu button if on mobile device -->
            <a class="menu">
                <span class="line"></span>
            </a>
        </div>
    </div>
</nav>

<强> CSS

.handle {
    width: 100%;
    background-color: #ffe2e2;
    font-family: "century gothic";
    opacity: 0.9;
    box-sizing: border-box;
    padding: 10px 10px;
    cursor: pointer;
    display: block;
    text-align: right;
}

/*added class for the menu - the heading text*/
.heading {
    /*This is commented out in the markup but is to keep the menu heading on the right*/
    position: absolute; 
}
.menu {
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #5f5f5f;
    font-weight: bold;
    display: inline-block;
    width: 1.9em;
    vertical-align: middle;
    height: 1.75em;
    padding: 2px 0 0 0;
    box-sizing: border-box;
}

.menu:hover {
    /* background-image: linear-gradient(#e63d44,#c11a22);*/
    /*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);*/
}

.menu .line {
    background: rgb(184,184,184);
    border-radius: 2px;
    box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);    
    display: block;
    margin: 10px auto 0 auto;
    height: 3px;
    width: 16px;
    content: " ";
    overflow: visible;
}

.menu:hover .line {
    background: rgb(255,255,255);
    box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);    
}

Js小提琴测试 - https://jsfiddle.net/ToreanJoel/b7mgaasj/

以我的菜单栏中的按钮为中心

5 个答案: