Использование вертикального выравнивания по вертикали по центру в пределах div

Question

Цель - центрировать кнопку в div, как по горизонтали, так и по вертикали. Горизонталь был рассмотрен, но возникли проблемы с вертикальным выравниванием.

Из w3schools page на vertical-align он утверждает, что с помощью 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; 
} 

Am Я неправильно думать, что родительский элемент является title-inner DIV?

Я также попытался установить CSS для:

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

безрезультатно.

Напомним: все дополнительные CSS и html, показанные в jsFiddle, чтобы дать наиболее точное представление о том, что я пытаюсь сделать - извинения, если это не нужно, но я бы предпочел оставить его, чтобы не потерять следы, где я , Конечной целью является просто (по вертикали) центр Выход кнопка в правом (синем) div.

Answer 1

Свойство vertical-align довольно сложно работать и немного больно быть честным. Более надежный способ центрирования - это метод, показанный здесь: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Я реализовал это ниже.

Или используйте 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 обходные пути.Я обновил свою скрипку с моим методом: 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

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

Однако этот элемент больше не оставался горизонтально по центру. После некоторой игры с этим методом я понял, что левый край кнопки - это точка, используемая для горизонтального центрального выравнивания. Добавив преобразование в направлении х, элемент был перемещен в правильное положение:

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