Question

我有这个HTML：

<div class="title_right mid_center top_menu">
  <a class="btn btn-app" href="/Home/ComoFunciona">
  <a class="btn btn-app" href="/Home/Tarifas">
  <a class="btn btn-app" href="/Home/Contacto">
  <a class="btn btn-app" href="/Security/Account">
</div>

CSS是：

.page-title .title_right {
  width: 55%;
  float: left;
  display: block;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
}

div.top_menu {
    height: 167px;
    vertical-align: middle;
}

如何将这些按钮垂直居中？我不想用填充修补它。

Answer 1

使用Flexbox非常简单。我只更改了div.top_menu个样式：

＆＃13;

.page-title .title_right {
    width: 55%;
    float: left;
    display: block;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
    background-color: violet;
}

div.top_menu {
    height: 167px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;

    -webkit-justify-content: center;
    justify-content: center;
}

＆＃13;

<div class="title_right mid_center top_menu">
  <a class="btn btn-app" href="/Home/ComoFunciona">1</a>
  <a class="btn btn-app" href="/Home/Tarifas">2</a>
  <a class="btn btn-app" href="/Home/Contacto">3</a>
  <a class="btn btn-app" href="/Security/Account">4</a>
</div>

＆＃13;

需要说的是，它是一个跨浏览器的解决方案，但是一些旧的浏览器并不支持flexbox。

Answer 2

将$('#mytable tr').each(function() { var customerId = $(this).find("td").eq(1).html(); console.log(_value); });与display: table-cell一起使用即可。

＆＃13;

vertical-align: middle

＆＃13;

.page-title .title_right {
  width: 55%;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
}

div.top_menu {
    height: 167px;
    vertical-align: middle;
    background-color: lightgray;
    display: table-cell;
}

＆＃13;

vertical-align不起作用

2 个答案: