Question

基本上我的网站看起来像这样：http://i.imgur.com/6xcWTxR.png 我想将带有文本的容器放在图像旁边。我怎么能这样做，并保持中心？我将我的代码放在下面。

<body>
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><a href="#" id="clickable_div"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"></a></div>
<div id="nav_menu" style="display:none; background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
  <center>Endless Void></center>
</div>
</body>

Answer 1

您很可能不得不使用：

margin: 0 auto;
width: /* your width here */

使您的内容居中，同时浮动您的两个DIV或绝对定位它们。

使用margin: 0 auto;时需要来提供宽度值，或者一旦浏览器有宽度可以使用它就无法工作，它可以自动为您计算边距。您可以将margin: 0 auto应用于<body>标记或包含图像和文本DIV的其他包装元素，例如<div>。

<div>是一个块级元素，默认情况下会尝试占用页面的整个宽度。这就是为什么你需要float他们或者使用某种positioning来改变这种行为并让两个元素相互排列的原因。

以下是jsFiddle中的基本示例：http://jsfiddle.net/vn34bw84/

Answer 2

只需添加inline-block并使用容器：

＆＃13;

#container {
    text-align:center;
}

#container > div {
    display:inline-block;
}

＆＃13;

<div id="container">
    <div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><a href="#" id="clickable_div"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"/></a>

    </div>
    <div id="nav_menu" style="background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
        Endless Void
    </div>
</div>

＆＃13;

Answer 3

将它放在CSS文件中：

#container {width: 200px;}
#left { border: 1px dotted red; float: left;  padding: 0px; margin: 0px;}
#right { border: 1px dotted red; float: right; padding: 0px; margin: 0px;}
/* I have added the border it usually helps to know where each boxes during development then later remove it. Also use padding and margin to get what you want */

这在您的HTML正文中

   <div id='container'>
         <div id='left'>
         </div>
         <div id='right'>
         </div>
   </div>

如何将这些东西放在一起？ CSS

3 个答案: