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 に答える