Question

我正在尝试将图像居中对齐在940px宽度页面中包含的div内。

<div class="header">

   <img class="logo" href="x"/>

   <ul class="topLinks">
     <li>blah</li>
   </ul>

</div>

我将“topLinks”ul浮动到右侧。我想将徽标类相对于整个940px页面居中。我能够使徽标居中的唯一方法是使用html属性'align =“center”'（我知道它已被弃用），但它只相对于浮动的topLinks而不是整个页面居中。

我试图将图像放在940px容器的中心，同时让topLinks直接浮动到它的右边。

Answer 1

CSS尝试：

.header img.logo { 
  margin:auto;
  clear:both;
}

.ul_wrapper {
  width:100%;
  height:auto;
  position:absolute;
}

.ul_wrapper ul.topLinks {
  float:right;
}

HTML尝试：

<div class="header">
    <img class="logo" src="x" />
    <div class="ul_wrapper">
        <ul class="topLinks">
            <li>blah</li>
        </ul>
    </div>
</div>

Answer 2

以下css应该使图像居中：

.logo {
   display: block;
   margin-left: auto;
   margin-right: auto
}

有关详细信息，请查看：http://www.w3.org/Style/Examples/007/center

居中对齐浮动旁边的div

2 个答案: