html - CSS 垂直对齐 - 再一次

Question

我知道这个问题一次又一次地出现。CSS中的垂直对齐似乎是一个主要问题......

我正在尝试将本网站头部的两个文本（Kinesiologie Stammheim和Dies ist der Platzhalter für ein Zitat zum Thema Erde）对齐到中间：http ://www.kine-stammheim.ch/ikmethode.html

我的 CSS 文件在这里：http ://www.kine-stammheim.ch/css/screen/screen-PAGE-layout.css

我尝试了谷歌提出的所有不同建议vertical-align:middle;，display:inline-block;, 等，但没有成功。

将这些文本垂直对齐到中间的正确方法是什么？

Answer 1

根据您对多行文本的评论，如果您添加：

#parentElement { display: table; width: 100%; }
#childElement { display: table-cell; vertical-align: middle;  text-align: center; }

这将使用单行或多行文本实现您想要做的事情。你需要#parentElement用你的两个父元素#banner, #logo替换：并#childElement用你的两个子元素替换：#banner .quote, #logo .logo_text

小提琴

Answer 2

纯 CSS，跨浏览器，无特定边距，无绝对定位，无设置行高

看看这个demo

HTML：（把你想要的一切都放在里面Centered）

<div class="Container">
    <div class="Centered">
        <p>Herzlich Willkommen</p>
        <p>Hier entsteht der Webauftritt der Kinesiologie Stammheim.</p>
    </div>
</div>

CSS：

.Container
{
    height: 400px; /*For the demo*/
    background-color: #d3d3d3;
    text-align: center; /*optional*/
}
.Container:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.Centered
{
    background-color: yellow;
    display: inline-block;
    vertical-align: middle;
}

说明： 我正在向inline-block容器中添加一个空元素（高度为 100%），并使Centereddiv 与他的中间对齐（始终是容器的中间）

Answer 3

您必须解决较小的布局问题。

这是解决第一个问题的方法。

<div id="logo">

    <img class="logo_img" src="../../images/logo.png"></img>
    <div class="logo_text"> … </div>

</div>

.logo_img {
    height: 100px;
    margin: 10px 20px 10px 0px;
    vertical-align: middle;
}

.logo_text {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 600;
    font-size: 133.33%;
    display: inline-block;
    line-height: 1.5em;
    vertical-align: middle;
}

在与 相关的部分#logo，不要浮动img，将其保留为 inline 或 inline-block 元素并设置vertical-align: middle。

为.logo-text, 添加display: inline-block和vertical-align: middle。

这会将图像和文本块定位在标题块的垂直中间。

对于与 相关的问题二.quote，

<div id="banner">
    <div class="quote"> … </div>
</div>

.quote {
    font-family: "Times New Roman",Times,serif;
    color: white;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 200%;
    line-height: 120px;
    vertical-align: middle;
}

在这种情况下，将 设置line-height: 120px为与控制标题块高度的图像高度相匹配。

但是，如果将引用换行到第二行，这将无法正常工作，并且表格单元格方法会更好。

这是使用 Firefox 代码检查器的结果：

Answer 4

最好将您的父部门声明为position:relative和子部门为position:absolute，然后您可以轻松调整它。

使用左、右、上、下调整您想要的任何位置。

Answer 5

我认为这段代码可以帮助你，只需编辑这些类：

.quote {
font-family: "Times New Roman", Times, serif;
color: white;
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 200%;
line-height: 1.5em;
vertical-align: middle;
display: table-cell;   /*added*/
}

#banner {
background-image: url(../../images/erde.jpg);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
height: 120px;
display: table;    /*added*/
width: 100%;       /*added*/
}