0

最后结果

如图所示，我实际上有一个定义宽度为 100% 但没有定义高度的 div，而是定义了高度以匹配内容与顶部和底部填充的百分比。问题是我想在右侧有某种导航按钮，它们必须在垂直中间完美对齐。我已经包含了我所做的一个小提琴，但它并没有在所有情况下都显示在中间。什么是最佳解决方案。

HTML

<div class="title">Title
    <ul id="bullets">
      <li></li>
      <li></li>
    <ul>
</div>

CSS

.title {
    width:100%;
    background:#365F95;
    background-size: contain;
    font-size:130%;
    color:#FFF;
    padding:5% 0;
    text-align:center;
    position:relative;
}
.title ul {
    position:absolute;
    right: 0;
    top: 0%;
}
.title ul li {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
    margin: 0 2px;
}

http://jsfiddle.net/HJLEe/2/

4

6 回答 6

2

看看这个小提琴的想法是垂直对齐列表

position: absolute;
top: 50%;
margin-top: - half-height;
于 2013-07-02T08:31:59.660 回答
1

不是最好的解决方案，但它有效。

HTML：

<div class="title">Title
    <ul id="bullets">
        <li></li>
        <li></li>
    <ul>
</div>

CSS：

.title {
    width:100%;
    background:#365F95;
    background-size; cover;
    font-size:130%;
    color:#FFF;
    padding:5% 0;
    text-align:center;

}
.title ul {
position:relative;
float: right;
margin-top: 0px;
}
.title ul li {
    display: inline-block;
    width: 10px;
height: 10px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
    margin: 0 2px;
}

JSFIDDLE

于 2013-07-02T08:31:08.107 回答
0

尝试在你的 ul 类中使用相对位置

 .title ul {
 position: relative;
              }

jsfiddle.net

于 2013-07-02T08:31:10.330 回答
0

试试这个css

.title ul {
position: absolute;
right: 0;
top: 0%;
padding-top: inherit;
margin: 0;
}
于 2013-07-02T08:31:39.710 回答
0

尝试以百分比设置边距。像这样...

.title ul {
    position:absolute;
    right: 0;
    top: 0%;
    vertical-align :middle;
    margin-top : 5%;
}
于 2013-07-02T08:33:09.830 回答
0

另一个使用 vertical-align:middle 和辅助伪元素来保持高度的选项。

演示：http: //jsfiddle.net/HJLEe/13/

代码的基本补充：

.title ul {
    position:absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

/* style of LIs not changed */

.title ul:before {
    content: '';
    display: inline-block;
    height: 100%; /* makes the effective line height equal to the height of the container */
    vertical-align: middle; /* align the vertical center with the vertical middle of the text, including our bullets */
}
于 2013-07-02T08:43:32.397 回答