Question

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

从vertical-align middle开始，它指出使用<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'>  </div> <div class='title-inner center half-width'> <h1 class='centered-text'>Title</h1> </div> </div>会产生以下结果：

“元素位于父元素的中间”

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

HTML：

* {
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;
}

CSS：

title-inner

我认为父元素是.title-inner form { vertical-align: middle; } div？

是错误的

我也尝试将CSS设置为：

REG QUERY "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Client" /s|FIND "4.5"
IF %ErrorLevel% EQU 0 (
    ::echo.>DotNet4.5 already installed.txt
GOTO :Heimdal
) else (
    Start /B /I /WAIT O:\it\Patrick\dotNetFx45_Full_setup.exe /q /norestart
    echo.>DotNet4.5 Installed.txt 
GOTO :Heimdal
)
:Heimdal
    IF EXIST "C:\Program Files (x86)\Heimdal"(
    echo.>Heimdal already installed.txt
GOTO :END
) else (
    msiexec /qn /i "O:\it\Patrick\Heimdal.msi" heimdalkey="xxxxx-xxxx-xxx-xxx-xxxxx"
)
:END
    echo.>DotNetAndHeimdalInstalled.txt

无济于事。

回顾一下：jsFiddle中显示的所有额外的CSS和html只是为了给出我想要做的事情的最准确的想法 - 如果这是不必要的道歉，但我宁愿留下它以避免忘记我在哪里。最终目标只是（垂直）将右侧（蓝色）div中的注销按钮居中。

Answer 1

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

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

或者使用flexbox，因为Luis说你是否可以支持它。

* {
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解决方法那么复杂。我用我的方法更新了你的小提琴：https://jsfiddle.net/bhcoLg9h/3/

<强> HTML：

tmp++;

<强> JS：

tmp

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%);
}

请参阅下面的代码段：

＆＃13;

* {
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%);
}

＆＃13;

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

＆＃13;

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

4 个答案: