Question

html,body {
  width : 100%;
  height : 100%;
  }

#side-bar{
  background-color:yellow;
  width:15%;
  height:100%; 
  float:left;
}
#content{
  border:1px solid green;
  width:50%;
  height:6%;
}

<body>
  
  <div id="side-bar">
    <div id ="content"></div>
  </div>
  
    
</body>

这是我的代码，我正在尝试将#content部分对齐到侧边栏的中间，我尝试了下面的想法。

#side-bar{ align-content : center; }

然后

#content{margin-left:auto;margin-right:auto;}

但两者都不适合我，我怎么能这样做？

Answer 1

将div居中的常用方法是使用margin: 0 auto;。有关使用CSS进行居中的信息，请参阅this guide。

html,
body {
  width: 100%;
  height: 100%;
}
#side-bar {
  background-color: yellow;
  width: 15%;
  height: 100%;
  float: left;
}
#content {
  border: 1px solid green;
  width: 50%;
  height: 6%;
  margin: 0 auto;
}

<body>
  <div id="side-bar">
    <div id="content"></div>
  </div>
</body>

Answer 2

仅在 #content

中使用margin: 0 auto;

＆＃13;

html,body {
  width : 100%;
  height : 100%;
  }

#side-bar{
  background-color:yellow;
  width:15%;
  height:100%; 
  float:left;
}
#content{
  border:1px solid green;
  width:50%;
  height:6%;
  margin: 0 auto;
}

＆＃13;

<body>
  
  <div id="side-bar">
    <div id ="content"></div>
  </div>
  
    
</body>

＆＃13;

Answer 3

如果您需要#content申请margin:auto的中心。

如果需要啊中间 on on vertical和horizontal也适用于position:relative;top:47%。如果你不需要删除那个

＆＃13;

html,body {
  width : 100%;
  height : 100%;
  }

#side-bar{
  background-color:yellow;
  width:15%;
  height:100%; 
  float:left;
}
#content{
  position:relative;/*for both vertical and horizontal center*/
  border:1px solid green;
  margin:auto;/*for center*/
  top:47%;/*for both vertical and horizontal center*/
  width:50%;
  height:6%;
}

＆＃13;

<body>
  
  <div id="side-bar">
    <div id ="content"></div>
  </div>
  
    
</body>

＆＃13;

我如何将一个div对齐到中间？

3 个答案: