0

我想在我的网站标题中垂直居中两个 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 左右?

4

2 回答 2

4

也许这可以以某种方式帮助你?

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

这是关于使用text-align: justify;

于 2013-07-15T11:10:30.590 回答
0

试试这个,..替换你的风格

.right {float : right;}
.left {float: left;}
于 2013-07-15T11:20:53.907 回答