Sometimes the most simple looking little layouts require complicated structures and various styling tricks. Centering elements, justifying content or aligning them the way we want can get really funky and frustrating. One of those little simple things that comes with many pitfall when laying it out is the justified header: title on the left and navigation on the right side. You could use floats, position one of the elements absolutely and more, no big deal. But now you’d like to center both things vertically. Easy, just add paddings, margins or set the line-height to the height of the parent, right? There are surely many solutions but when you start to think “responsively”, not all of these solution are so easy after all and they might bring some undesired effects. Especially the combination of both, vertical centering and justification, can get quite messy.
有时看起来最简单的小布局需要复杂的结构和各种样式技巧。 使元素居中，证明内容合理或按照我们想要的方式对齐它们可能会变得非常时髦和令人沮丧。 布局时会带来很多陷阱的那些小事情之一就是对齐的标题：标题在左侧，导航在右侧。 您可以使用浮点数，将元素绝对定位在更多元素上，没什么大不了的。 但是，现在您想将两件事都垂直居中。 简单，只需添加填充，边距或将行高设置为父级的高度，对吗？ 当然，有很多解决方案，但是当您开始“响应式”思考时，并不是所有这些解决方案毕竟都那么容易，它们可能会带来一些不良后果。 尤其是垂直居中和对齐的结合会变得非常混乱。
Today I don’t want to go through all of the different possibilities of centering header (or any other) elements vertically and justifying them. I just want to show you some simple CSS tricks that will do it right, in my opinion. Not much markup, no absolute elements and no floats. Just one magic word: pseudo-elements.
今天，我不想讨论将标头(或任何其他)元素垂直居中并进行对齐的所有不同可能性。 我只想向您展示一些简单CSS技巧，这些技巧对我来说是正确的。 没有太多标记，没有绝对元素，也没有浮点数。 只是一个魔术字：伪元素。
So, we want to create a header with the following look:
因此，我们要创建一个具有以下外观的标头：
The markup is simply
标记很简单
<header>
<h1>Super Bad</h1>
<nav><a>First Link</a><a>Second Link</a><a>Third Link</a></nav>
</header>
We want the header to have a fixed height and some padding. It also needs a text-align: justify because we want to spread the children:
我们希望标题具有固定的高度和一些填充。 它还需要一个text-align: justify因为我们想传播孩子们：
header {
text-align: justify;
letter-spacing: 1px;
height: 8em;
padding: 2em 10%;
background: #2c3e50;
color: #fff;
}
In order to spread the heading and the nav, we will first set them both to inline-block. Like that we can put them next to each other without using floats or absolute positioning.
为了扩展标题和导航，我们首先将它们都设置为inline-block 。 这样，我们可以将它们彼此相邻，而无需使用浮点数或绝对定位。
header h1,
header nav {
display: inline-block;
}
But for the text-align: justify to work as we wish (setting the heading on the left and the nav on the right), we need to use a little pseudo-element trick that I’ve found in this great article by Jelmer de Maat. Justifying inline or inline-block elements only works if their length is actually bigger than the one of their container, i.e. once we have an overflow or line-break. But since this is not the case here, the content is not justified. Here we will leverage the power of pseudo-elements: we can give the pseudo-class ::after a width of 100% and set it to inline-block. This will cause a line-break and our content will get justified like we wanted:
但是，为了使text-align: justify可以按照我们希望的方式工作(将标题设置在左侧，将导航栏设置在右侧)，我们需要使用我在Jelmer de的这篇出色文章中发现的伪元素技巧马特仅当内联元素或内联块元素的长度实际上大于其容器之一的长度时，才能证明其合理性，即一旦发生溢出或换行。 但是由于这里不是这种情况，因此内容没有理由。 在这里，我们将利用伪元素的力量：我们可以将伪类::after的宽度设置为100％之后，并将其设置为inline-block 。 这将导致换行，并且我们的内容将如我们所希望的那样合理：
header::after {
content: '';
display: inline-block;
width: 100%;
}
So this it what we have right now:
所以这就是我们现在所拥有的：
Nice, we’ve positioned both elements horizontally as we wanted without using floats or absolute positioning. But now we’d also like to center them vertically. I can hear your alarm bells going off, you’ve surely fought with this many times: vertical centering. There are many attempts and solutions but they all come with some downsides or just seem too complicated. At this point, you might think about margins, line-height and of course absolute positioning.
好的，我们已经根据需要水平放置了两个元素，而没有使用浮点或绝对定位。 但是现在我们还想将它们垂直居中。 我能听到您的警钟响起，您肯定已经战斗了多次：垂直居中。 有很多尝试和解决方案，但是它们都有一些缺点，或者看起来太复杂。 此时，您可能会考虑页边距，行高以及当然的绝对位置。
Let’s try to find a better way.
让我们尝试寻找更好的方法。
If you play around with vertical-align on the nav, you will notice that it will move vertically relative to the height of the heading. For example, let’s try vertical-align: top:
如果在导航上vertical-align ，您将注意到它会相对于航向高度垂直移动。 例如，让我们尝试vertical-align: top ：
As you can see, the nav moves up.
如您所见，导航上升。
If we set the height of the heading to 100%, we can center the nav relative to the header height by setting vertical-align: middle:
如果将标题的高度设置为100％ ，则可以通过设置vertical-align: middle来使导航相对于标题高度vertical-align: middle ：
Now, how can we make both elements be centered inside of the header container? We would need another element that would make the vertical-align work as we want. I can hear you thinking now… Maybe a pseudo-element? Yes, of course! Again, we will use a pseudo-element to create the desired environment for our properties to work, a technique by Michał Czernow mentioned in the article Centering the Unknown. So, we will add a pseudo element that has a height of 100% and a vertical-align of middle:
现在，如何使两个元素都位于标头容器的中心？ 我们将需要另一个元素，该元素将使垂直对齐按需要进行。 我现在听到您在想……也许是伪元素？ 当然是！ 同样，我们将使用伪元素为属性运行创建所需的环境，这是MichałCzernow在题为“未知的中心”中提到的技术。 因此，我们将添加一个伪元素，该伪元素的高度为100％，并且中线vertical-align ：
header h1 {
height: 100%;
}
header h1::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
And as a result we get what we want:
结果，我们得到了我们想要的：
Almost! It does look right, but we need to make sure of two more things:
几乎！ 看起来确实不错，但是我们需要确保另外两件事：
line-breaks for longer text
换行符以获取更长的文本
responsiveness
React性
So, let’s start with number one. If our title would be much longer, our pseudo-element would cause an undesired effect which is to push the heading from the second line on down. That’s of course logical since we have a pseudo-element with a height of 100%:
因此，让我们从第一名开始。 如果标题会更长，那么伪元素会导致不希望的效果，即将标题从第二行向下推。 这当然是合乎逻辑的，因为我们有一个高度为100％的伪元素：
(Note that we’ve, of course, restricted the width of the h1 to 50% because we don’t want it to just fill all the header.)
(请注意，我们当然将h1的宽度限制为50％，因为我们不希望它仅填充所有标头。)
Let’s fix that by wrapping the heading into another division…
让我们通过将标题包装到另一个分区来解决此问题……
<header>
<div><h1>Super Bad</h1></div>
<nav><a>First Link</a><a>Second Link</a><a>Third Link</a></nav>
</header>
…and using the pseudo-element trick on that element:
…并在该元素上使用伪元素技巧：
header {
text-align: justify;
height: 15em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: '';
display: inline-block;
width: 100%;
}
header > div,
header nav,
header div h1 {
display: inline-block;
vertical-align: middle;
}
header > div {
width: 50%;
height: 100%;
text-align: left;
}
header > div::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
And we get this:
我们得到这个：
Number one is off the list, so let’s take care of the responsiveness. There are of course, several possibilites when it comes to flexible layouts. You could for example, not define a height for the header at all and let the inner elements and the padding be responsible for the height. In that case we also won’t need the second pseudo-element trick (and the wrapper for the h1) and we would simply have:
第一不在列表中，所以让我们关注一下响应能力。 当涉及到灵活的布局时，当然有几种可能性。 例如，您可能根本不定义标题的高度，而让内部元素和填充负责高度。 在那种情况下，我们也不需要第二个伪元素技巧(和h1的包装器)，我们将简单地拥有：
header {
text-align: justify;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: '';
display: inline-block;
width: 100%;
}
header h1,
header nav {
display: inline-block;
vertical-align: middle;
}
header h1 {
width: 50%;
text-align: left;
padding-top: 0.5em;
}
header nav {
padding-top: 1em;
}
Which looks like this:
看起来像这样：
This will adjust just fine on smaller screens. But if you need a defined height (for example, just think about a full window height header) then we need our second pseudo-element trick, the wrapper and a media query that will simply take care of the smaller screens and maybe center the elements:
这将在较小的屏幕上调整得很好。 但是，如果您需要一个已定义的高度(例如，考虑一个完整的窗口高度标题)，那么我们需要第二个伪元素技巧，包装器和媒体查询，该查询将仅照顾较小的屏幕并可能将元素居中：
@media screen and (max-width: 820px){
header {
height: auto;
}
header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}
}
With the following result:
结果如下：
Note that I’m using 820px here because I want to show you what happens beyond that breakpoint. You should of course use an appropriate value for your layout.
请注意，我在这里使用820px，因为我想向您展示超出该断点的情况。 当然，您应该为布局使用适当的值。
If you’d like to support IE8, you should use “:” instead of “::” for the pseudo-elements.
如果要支持IE8，则应在伪元素中使用“：”而不是“ ::”。
Let’s give this baby some love and finalize the style:
让我们给这个婴儿一些爱，并最终确定款式：
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px;}
header {
text-align: justify;
height: 8em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: '';
display: inline-block;
width: 100%;
}
header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
text-align: left;
}
header > div {
height: 100%;
}
header > div::before {
content: '';
height: 100%;
}
header > div h1 {
font-size: 3em;
font-style: italic;
}
header nav a {
padding: 0 0.6em;
white-space: nowrap;
}
header nav a:last-child {
padding-right: 0;
}
@media screen and (max-width: 720px){
header {
height: auto;
}
header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}
}
And here we go:
现在我们开始：
And that’s it! We’ve centered the elements vertically and aligned them as we wanted.
就是这样！ 我们将元素垂直居中并根据需要对齐它们。
This is of course just one way to do it and there are surely tons of possibilities. I just found this one to be really neat.
当然，这只是实现它的一种方式，肯定有无数种可能性。 我才发现这真的很整齐。
Hope this was somehow useful to you!
希望这对您有用！
翻译自: https://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
