我想在我网站的标题中垂直居中两个div。这是代码:
<header>
<div class="block">
<div class="left">
<ul>
<li>Home page link</li>
<li>Music page link</li>
<li>Contact page link</li>
</ul>
</div>
<div class="right">
<ul>
<li> Facebook icon code</li>
<li> Twitter icon code</li>
<li> YouTube icon code</li>
<li> PayPal donate button code</li>
</ul>
</div>
</div>
</header>
CSS:
.block {
width: 100%;
height: 90px;
}
/* ghost element */
.block:before {
content: '';
display: inline-block;
height = 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.right, .left {
display: inline-block;
vertical-align: middle;
}
.right {right: 0;}
.left {left: 0;}
.right li, .left li {
display: inline-block;
}
.left li {
font-size: 48px;
margin-left: 12px;
letter-spacing: -4.5px;
text-transform: uppercase;
}
这取自:
https://stackoverflow.com/a/15304578/1491212
http://css-tricks.com/centering-in-the-unknown/
代码适用于垂直居中的div。但是,这些示例仅讨论了一个垂直居中的div。我希望两个div垂直居中,一个左对齐,另一个右对齐。现在,他们正好坐在一起:
我是编码的新手,在来到这里之前,我已经做了尽可能多的阅读;但是,我无法修复这个(可能)简单的问题。那么,我是否在奇怪的鬼元素框架内得到div class = right和div class = left左右?
答案 0 :(得分:4)
也许这可以帮助你?
http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
关于使用text-align: justify;
答案 1 :(得分:0)
试试这个,.. 用你的风格取代
.right {float : right;}
.left {float: left;}