标签: positioning

默认情况下,颜色框在屏幕上显示为垂直和水平居中.有没有办法改变它,例如从顶部垂直和水平居中10%？

我希望我的Android对话框和/或警报有时在屏幕的最顶部对齐,而不是简单地在中心.这可能吗？给出精确的xy坐标怎么样,这可能吗？

在这个页面上,我想将主#container div相对于页面水平居中.通常我会通过添加CSS规则来实现这一点,

#container { margin: 0 auto }

但是,此页面的布局(我没有写),使用#container及其大多数子元素的绝对定位,因此此属性无效.

有没有什么方法可以实现这种水平居中而不需要重写布局来使用静态定位？如果这是实现我的目标的唯一方法,我使用JavaScript/JQuery没问题.

想知道是否有人有这方面的解决方案.
我想提供一个最旧的底部和最新的缩略图图像存档.我也希望流程本身能够逆转......就像这样:

页面应该右对齐,将来的图像添加到页面顶部.我正在使用PHP从MySQL DB中提取图像文件名来动态创建页面.这里的问题是我希望这种布局是流畅的,这意味着大多数用于计算图像和构建HTML的PHP​​技巧都会出现在窗外.

有没有办法用Javascript甚至只用CSS做到这一点？

我的问题如下:
边框不包装包含的项目.我知道这是因为我将内容项置于绝对位置,但我需要它们才能使布局工作.这也意味着我不能使用clearfix解决方案(这意味着我必须浮动元素,这不是一个选项).
所以我的问题是,如何让父div获得所包含元素的高度.

编辑:没有Javascript解决方案,只有CSS

HTML:

<div class="mask">
    <div id="content-1" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div id="content-2" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div> 
</div>????

CSS:

.mask{
    position:relative;
    width:800px;
    border: 1px solid black;

}
.content-item{
    position: absolute;
    width:300px;
}
#content-1{
    left:10px;
}
#content-2{
   left: 300px;
}

​

我正在努力让div完全扩展到它的容器高度.

标记:

<div class="container">
  <div class="innerOne inner"></div>
  <div class="innerTwo inner"></div>
</div>

在不同的视口中.innerTwo,内容比我们的内容高,.innerOne但我希望它的背景与.innerTwos的大小相同

样式:

.container {
   width: 100%;
   height: auto;
   background-color: yellow;   

   /* clearfix */
   *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
     line-height: 0;
   }
   &:after {
    clear: both;
   }
}

.inner {
   float: left;
   width: 50%;
   height: 100%;
   background-color: red;
}

但高度不会匹配.我知道可以通过给容器设置一个高度来完成它,但我不想这样做,因为它是一个响应式站点.这可能吗？我宁愿不使用JS.

我正在尝试将元素放在元素的左侧,但是我似乎无法使它们具有相同的高度并且彼此对齐.跨度似乎总是略高一些.

有人有任何想法吗？

闪耀*

编辑:HTML部分

<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>

CSS

span.box{
    position:absolute;
    width:100px;
    margin-left:20px;
    border:1px;
    padding:2px;
    height: 16px;
}

input.name {
    width: 115px;
    height: 14px;
}

我希望我的页面始终在浏览器中居中而不影响内容(例如align-text:center; does).我想以我的包装器为中心..我该怎么做？

简化现有页面:

<div id="wrapper">       
    <div id="header">
        Music Heaven
    </div>
    <div id="topmeny">             
    </div>
    <div id="menu">        
    </div>        
    <div id="content">                  
    </div>           
    <div id="bottom">
        SiteAdmin
    </div>
</div>

整个小提琴:http://jsfiddle.net/EndQb/

我在z-index和定位方面遇到了一些问题.基本上,当您将鼠标悬停在菜单项(主页,大约等)上时,应在菜单下方加载油漆溅:

http://www.saradouglas.net/home

样式表位于此处.

当每个splash div设置为绝对定位时,这工作正常,但我意识到这些将出现在不同屏幕分辨率的不同位置.我认为只是将其改为相对定位,然后相应地调整坐标.不幸的是现在我的飞溅没有出现在菜单下面,就像他们应该的那样.

为了澄清,我希望在菜单下显示飞溅 - 因此菜单应始终显示在飞溅的顶部.这只是一个问题,因为将菜单设置为相对,这些溅到绝对.

我希望这是一个简单的解决方法,我只是遗漏了一些东西.我希望有人能告诉我哪里出错了并提供解决方案!

到目前为止已经提交了一些很好的答案,但不幸的是他们没有解决我的问题.我已经尝试将菜单背景添加到ul类而不是div,但这对问题没有任何影响.

我在我的网页中有以下HTML,我希望将侧边栏固定在左侧.它在Chrome中工作正常,但Firfox没有将侧边栏显示为固定:

<div id="sidebar">
    <!-- Logo -->
        <div >
            <h1>Heading</h1>
        </div>
            <!-- Nav -->
                <nav id="nav">
                    <ul>
                        <li><a href="#target1" >About</a></li>
                        <li><a href="#target2" >Works</a></li>
                        <li><a href="#target3" >Our Team</a></li>
                        <li><a href="#target4" >Contact</a></li>

                    </ul>
                </nav>

</div>

上面代码的CSS是:

#sidebar
{
    position: fixed;
    top: 0;
    padding: 3em 1.35em 1em 1.15em;
    height: 100%;
    width: 12em; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

请给我一些解决方案,以便侧边栏在Firefox中保持固定.

DOWNVOTERS请先评论.