我有一个设计问题.我在页面上有一个居中的徽标,我想要的是一个以页面左侧和徽标左侧为中心的div.

我怎么能只用css实现这个目的？

这是一个例子：

看看这个演示……

http://jsfiddle.net/UnsungHero97/7Z5fu/

HTML

<div id="wrapper">
    <div id="Box-left">
        <div id="left"></div>
    </div>
    <div id="Box-center">
        <div id="center"></div>
    </div>
</div>

CSS

html,body {
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper {
    width: 100%;
}

#Box-center,#Box-left {
    width: 50%;
    float: left;
}

#left {
    border: 1px solid magenta;
    height: 50px;
    width: 50px;
    position: relative;
    left: 50%;

    /* half of width of #left + half of margin-left of #center */
    margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}

#center {
    border: 1px solid magenta;
    height: 50px;
    width: 200px;
    margin-left: -100px;
}

我希望这有帮助.

我是 angularjs的初学者,请放轻松我.所以我有这个指令,并想动态地将它附加到div元素.我该怎么办？

appDirectives.directive('test',function () {
    return  {
        restrict: 'E',templateUrl: 'templates/test.html'
    }
});

我尝试了这个,但它没有用.我假设模板没有在我附加到div元素之前编译.有角度的方法吗？

<div id="element"></div>

$('#element').append(<test></test>);

更新：这是我正在尝试做的事情.当用户登录我的页面时,我有3个不同的模板,我希望它显示取决于用户的类型.
3个模板是< basic>,< regular>,< advance>
基本上在用户登录后,我将拥有变量user.type的值,并希望为该用户显示相应的模板.

任何建议都会有帮助.谢谢 ：)

这样的事情可能会是什么？ http://plnkr.co/edit/SmL9fA5GzAxI2WYTnYZy

Angular方式是通过javascript对象表示视图(在范围内) 并让Angular模板系统重新修改你的模型.

我的页面中央有一张桌子

http://jsfiddle.net/YrBnd/3/

是否可以将按钮放在示例中,就在表格的左侧？

这个高技能的绘图应该会给你一个更好的图片：

|                  |
|    $$center      |
|                  |

$$是我想要放在中心的按钮.

尝试这种方法,基于你的jsfiddle：

HTML

<span>Center body text<button>Click</button></span>

CSS

span {
    display: block;
    width: 200px;
    margin: 0 auto;
    position: relative;
}
button {
    position: absolute;
    right: 100%;
}

http://jsfiddle.net/YrBnd/4/

按钮从右边缘绝对放置到量程元素宽度的100％.

我正在使用< section>在几个页面上标记,但在一个页面上,我正在使用< aside>以< section>开头的标记标签.

在我有< section>的情况下紧接着是< aside>,我想对两者都应用一个宽度,让左边的部分浮动,然后向右浮动.

基本上,如果我有< section>和<旁边>我希望风格像这样工作：

section {
    width: 500px;
    float: left;
    padding: 8px;
}

aside {
    padding:8px; 
    width:400px;
    float:right;
}

如果我只有< section>我希望它像：

section {
    padding: 8px;
}

有没有办法可以用CSS3中的条件语句或伪类来完成这个,而不必使用JavaScript,自定义类或单独的CSS文件？

这只适用于< section />来自< aside />之后：

<aside>content</aside>
<!-- if there is another node in between,use the '~' selector -->
<section>content</section>

在这种情况下,你可以使用旁边〜节或旁边部分：

section {
    padding: 8px;
}
aside + section {
    width: 500px;
    float: left;
}

在所有其他情况下,您将不得不使用JavaScript,因为这些选择器仅在一个方向上工作,从上到下.

使用CSS4可能有一种方法使用Subject of a selector with Child combinator,但这是未来.此选择器已从规范中删除.

我想在视频中心没有固定宽度的div,所以如果窗口调整大小,div会随之缩小但仍然在中心.我使用左边的当前设置接近正确：50％,半负边距.问题显然是在负边际固定时向左移动.有任何想法吗？谢谢！

我的HTML：

<div id = 'top-container'>
   <video id='top-vid' autoplay loop width=100% height='auto'>
       <source src='DS_Intro.mov' type='video/mp4'>
       <source src='test.webm' type='video/webm'>
   </video>

   <div id = 'top-content'>
       <div id = 'top-text'>
           <div id = 'top-img'>
               <img src='ds_white.png' width = "100%" height = 'auto'>
           </div>
           <h1 id = 'top-slogan'>a boutique video production studio</h1>
       </div>
   </div>
</div>

我的CSS：

#top-container{
    width:100%;
    height:100%;
}

#top-content{
    max-width:1200px;
    margin-right:auto;
    margin-left:auto;
}

#top-img{
    width:100%;
    padding-bottom: 10%;
}

#top-slogan{
    text-align:center;
    padding-bottom:10%;
    font-weight: 100;
    color:#5DBCD2;

}

#top-text {
    top: 50%;
    left: 50%;
    margin-left: -360px;
    position:absolute;
    width:50%;

}

这是FIDDLE

这可以通过使用transform：translate(-50％,– 50％);
通过使用它,内部元素可以是动态的(不需要负边距),请参见此示例

http://jsfiddle.net/Mfsfm/2/