0

サイドバーを垂直方向に中央に配置しようとしましたが、水平方向に中央に配置しました。私は display:table; を認識しています。しかし、それは私がやりたいことではありません。サイドバーのすぐ隣にメイン コンテンツ エリアを配置するからです。コードとスタイルは次のとおりです。

<div class="sidebar">
    <ul>
        <li>Homepage</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
    </ul>   
</div>

CSS:

div.sidebar{
    background-color:       #DEFFFF;
    width:                  156px;
    height:                 385px;
}

div.sidebar a{
    color:                  black;
    display:                block;
}

div.sidebar ul li{
    margin-left:            -33px;
    list-style-type:        none;
    width:                  140px;
    height:                 25px;
    border-right:           1px solid black;
    border-top:             1px solid black;
    border-left:            1px solid black;
    background-color:       #BCA264;
    font-family:            bold;
}
4

2 に答える 2

1

CSS3 ソリューション: http://jsfiddle.net/RazvanGirmacea/HDyuX/

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;

display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;

display: box;
box-orient: vertical;
box-pack: center;
于 2013-03-13T19:13:07.210 に答える
0 
<div class="parentPanel">
  <div class="content">
    <img src="http://placehold.it/400x500">
  </div>
  <div class="sidebar">
    <ul>
      <li>Homepage</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
    </ul>
  </div>
</div>

そして、次のCSSを使用してください

.parentPanel {
    border: 1px solid blue;
}
.content {
    border: 1px solid blue;
    display: inline-block;
    vertical-align: middle;
}
.content img {
    display: block;
}
.sidebar {
    border: 1px solid blue;
    display: inline-block;
    vertical-align: middle;
}

コンテンツ エリアのサイズを適切に変更し、それに応じてサイド バーとリンクのスタイルを設定できます。

参考： http: //jsfiddle.net/audetwebdesign/KUFRK/

注:
コンテンツ領域はナビゲーション バー リストよりも高いと仮定しました。

于 2013-03-13T19:13:33.717 に答える