使用 vertical-align 使按钮在 div 中垂直居中

Question

目标是使按钮在 div 中水平和垂直居中。水平已处理，但垂直对齐有问题。

vertical-align 上的 w3schools page 指出使用 middle 会产生以下结果：

"The element is placed in the middle of the parent element"

在我的问题 (see jsFiddle here) 中，我已将父元素中按钮的 CSS 设置为垂直对齐（据我所知）。

HTML:

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

CSS:

* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    vertical-align: middle;
}

我认为父元素是 title-inner div 是不是错了？

我也试过将 CSS 设置为：

.title-inner form { vertical-align: middle; }

无济于事。

回顾一下：jsFiddle 中显示的所有额外 CSS 和 html 只是为了最准确地了解我正在尝试做的事情 - 如果这是不必要的，我深表歉意，但我宁愿离开它以避免忘记我在哪里。最终目标只是（垂直）将注销按钮置于右侧（蓝色）div.

的中心

Answer 1

vertical-align 属性很难使用，说实话有点痛苦。一种更可靠的居中方法是此处显示的方法：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

我已经在下面实现了这个。

或者如果你能支持，就按照 Luis 所说的使用 flexbox。

* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    position:relative;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

Answer 2

我通常使用 JS 来垂直居中，这对我来说似乎没有 CSS 解决方法复杂。我已经用我的方法更新了你的 fiddle：https://jsfiddle.net/bhcoLg9h/3/

HTML:

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST' id="button1">
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

JS:

$(document).ready(function() {
    var OuterHeight = $('#titleSection').height();
    var InnerHeight = $('#button1').height();
    var TopMargin = (OuterHeight-InnerHeight)/2;
    $('#button1').css('margin-top', TopMargin);   
});

Answer 3

您应该为父 div

设置 display:table

div.title-inner {
height: 100%;
text-align: center;
display: table;}

并设置

    display: table-cell;
    vertical-align: middle;

对于.title-inner form

Answer 4

感谢@andy-furniss 通过编辑子元素的 CSS 得出垂直对齐问题的答案，如下所示：

.title-inner button {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
}

但是，元素不再使用此方法保持水平居中。在尝试使用此方法后，我意识到按钮的左边缘是用于水平居中对齐的点。通过在 x 方向上添加一个变换，元素被移动到正确的位置：

.title-inner button {
    position: absolute;
    top:50%;
    transform: translate(-50%, -50%);
}

请参阅下面的代码段：

* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    position:relative;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    position:absolute;
    top:50%;
    transform: translate(-50%, -50%);
}

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

使用 vertical-align 使按钮在 div 中垂直居中

Using vertical-align to vertically center a button within a div

html

css

button

alignment

vertical-alignment