标签: positioning

如何将图像水平居中并同时对齐容器底部？

我已经能够通过自我水平居中.我也能够通过它自己对齐容器的底部.但我无法同时做到这两点.

这是我有的:

.image_block {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}

<div class="image_block">
    <a href="..."><img src="..." border="0"></a>
</div>

该代码将图像与div的底部对齐.我需要添加/更改什么才能使图像在div内水平居中？图像尺寸在手前是未知的,但是它将是175x175或更小.

我正试图找到以下问题的答案:

元素的z-index样式是其绝对堆栈顺序,还是相对于其父级的堆栈顺序？

例如,假设我有以下代码:

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

哪一个会在前面 - #dHello,还是#dDomination？

这仅仅是为了举例.我在多个地方试过这个,结果似乎有所不同.我看到是否有人知道一个权威的解决来源:

1)关于z-index的实际标准是什么(具体是关于这个主题)？2)各个浏览器的实际实现方式有何不同？

谢谢!

我对jQuery比较陌生,但到目前为止,我看到了我喜欢的内容.我想要的是div(或任何元素)跨越页面顶部,就好像"position:fixed"在每个浏览器中都有效.

我不想要复杂的东西.我不想要巨大的CSS黑客攻击.我更喜欢只使用jQuery(版本1.2.6)已经足够好了,但是如果我需要jQuery-UI-core,那也没关系.

我试过$("#topBar").scrollFollow(); < - 但这很慢......我希望看起来真的很固定.

如何使元素自动定位在页面的新行中？在HTML中我可以使用<br>,但是如何在CSS中添加像换行符这样的东西呢？

假设我有以下代码,例如:

<p>Lorem ipsum dolor sit amet,
   <span id="elementId">consectetur adipisicing elit.</span>
   Magni totam velit ex delectus fuga fugit</p>

跨度仍与文本的其余部分位于同一行.如何仅通过CSS在新行上移动跨度文本？

另一个例子是使用display: inline-block或float:

<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>

.smalldiv {
    display: inline-block; // OR
    float: left;
}

如何<div>在新行上移动其中一个以创建新行？

我有一个奇怪的问题,将一组div放在另一个div中.我认为用图像描述它最好:

在黑色(#box)div内,有两个div(.a,.b)必须放在同一个地方.我想要实现的是第一张图片,第二张是我得到的效果.看起来如果div没有清除或什么东西浮动,显然不是这种情况.任何想法都会受到欢迎!

这是此示例的代码:

CSS:

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML:

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>

我试图让这里的图块彼此对齐,但如果它们是不同的高度,由于某种原因,较短的div与容器div的底部对齐.div都没有任何可能导致此行为的填充或边距.我需要做些什么才能使它们与div的顶部对齐？

我有面包屑菜单的以下标记:

<div>
    <span class="start-here">You are here:<span>
    <a href="/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

当所有元素以内联方式显示时,是否有一种智能方法可以将那些› (.raquo)字符移动几个像素而无需绝对定位？我希望这个字符比其他字符小,并显示在行的中心(或向下/向上的一些像素).

(我需要它也适用于IE6及以上)

我有2个div,一个嵌套在另一个里面.根据页面设计,嵌套div需要看起来在父div的"顶部",如:

我已经为两个元素编写了CSS编码,使用嵌套div上的负上边距来尝试模拟所需的效果.然而,嵌套div的前10px左右不是出现在父级边界之外,而是被截断,如:

我不想绝对定位元素,因为这个页面的目标是响应.

div的HTML:

<div class="container-div">
  <div class="child-div">
    ...
  </div>
</div>

div的CSS:

.container-div {
  padding: 10px 10px 0;
}

.child-div {
  display: inline-block;
  width: 100px;
  height: 60px;
  margin: -15px 10px 0;
  border: 1px solid #efefef;
  background-color: #fff;
}

我想<h1>在任何用户页面的中间放置一个.我一直在搜索互联网,他们都把它放在不正确的地方.谢谢!

更新:我的意思是纵向和横向!在确切的中间!
另外:页面上没有其他内容.

(关于Stack Overflow的第一个问题.希望我做得对.)

我正在尝试创建一个浮动菜单,从其内容继承其宽度(因为我事先不知道宽度,即从URL加载).我可以通过将菜单div绝对定位而不设置宽度或高度来实现这一点.

当内容足够高以至于需要滚动时,会出现此问题.我设置"overflow:auto;" 这样它可以垂直滚动,但新的滚动条不会使div更宽.相反,div保持相同的宽度,并且滚动条突出到其先前大小合适的内容,迫使内容换行.

示例:http://jsfiddle.net/w7Mm8/

在示例中:在Firefox中,"five"被包裹到下一行,但在Chrome中(至少对于Mac),它全部显示在一行上.

没有明确设置菜单的宽度以包括滚动条的宽度,任何优雅的方式来做到这一点？

谢谢!