White Maskers White Maskers - 28 days ago 9
CSS Question

How can i align one div in to middle?



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>





Here is My code ,I'm trying to align the #content part in to middle of side bar,I'm tried the following thinks.

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


and then

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


but both are not worked for Me,how can I do that?

Answer

The common way to center a div would be to use margin: 0 auto;. See this guide for centering with CSS.

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>

Comments