Horizontally Center A Div In Another Div With Width 100%
Suppose we have two div with ID outerDiv and innerDiv.
The outerDIv has width 100% with yellow background.
Lets consider how to set innerDiv horizontally center inside the outerDiv.
For achieving this, we can set following style for the innerDiv.
margin : 0px auto
display : table
We don't have to adjust the width of innerDiv.
#innerDiv {
margin: 0 auto;
display: table;
}
Suppose we have two div with ID outerDiv and innerDiv.
The outerDIv has width 100% with yellow background.
The outerDiv has style for text-align as center;
Now for the innerDiv, the only required style is as follows.
display:inline-block.
#outerDiv {
text-align: center;
width: 100%;
}
#innerDiv {
display: inline-block;
}
By this way we can Horizontally Center A Div Within Another Div.