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

Posted 2023-03-05

【中文标题】使用vertical-align在div中垂直居中按钮

【英文标题】：Using vertical-align to vertically center a button within a div

【发布时间】：2016-02-11 09:36:51

【问题描述】：

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

从vertical-align 上的w3schools page 声明，使用middle 具有以下结果：

"元素放在父元素的中间"

在我的问题 (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 只是为了最准确地了解我正在尝试做的事情 - 如果这是不必要的，我深表歉意，但我宁愿将其保留以避免忘记我在哪里。最终目标只是将 Log Out 按钮（垂直）居中在右侧（蓝色）div 中。

【问题讨论】：

一个建议，用 flexbox 制作你的结构......你会用更少的 css 规则和更多的灵活性来实现你想要的。 - css-tricks.com/snippets/css/a-guide-to-flexbox

除了 flexbox 在 IE

w3schools 的文档非常糟糕。请改用 Mozilla 开发网络 (MDN) 文档。 developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 另请注意文档中的“vertical-align CSS 属性指定 inline 或 table-cell 框的垂直对齐方式。”所以除非你的元素是内联或表格单元格，vertical-align 不会做任何事情。

【参考方案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>

【讨论】：

感谢您的想法；这是实现所需垂直对齐的好方法。 但是： 我在问题的开头说过，我也需要将它水平居中，因为您的编辑似乎改变了水平对齐方式。从我的测试中，我发现它与 tte 子（按钮）元素上的 position: absolute; 有关，但我似乎无法找到一种方法来保持两者居中。您可能会注意到按钮的最左侧点居中 - 是否有简单的编辑使其成为中心点？再次感谢

啊，是的，我忘了这会破坏你的水平居中。我已经更新了我的答案，以使用相同的原则进行水平居中。

【参考方案2】：

感谢@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%);

见下面的sn-p：

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

【参考方案3】：

你应该为父 div 设置 display:table

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

并设置

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

为.title-inner form

【参考方案4】：

我通常使用 JS 来垂直居中，这对我来说似乎没有 CSS 变通方法那么复杂。我已经用我的方法更新了你的小提琴：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);   
);

【讨论】：

我应该说这需要 Jquery :)