Center Div inside another (100% width) div
Question
Quite a "simple" problem here and not sure why it's being so complicated.
- Have a 100% (width) sized div.
- Have another div positioned in the middle of this div (sized 940px width)
Any ideas? :)
6 answers
solution1
55 ACCPTED 2009-09-14 20:13:07
.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
solution2
30 2009-09-14 20:12:53
内部div的以下样式将使其居中。
margin: 0 auto;
solution3
20 2009-09-14 21:01:19
for detail info, let's say the code below will make a div aligned center:
margin-left: auto;
margin-right: auto;
or simply use:
margin: 0 auto;
but bear in mind, the above CSS code only works when you specify a fixed width (not 100%) on your html element. so the complete solution for your issue would be:
.your-inner-div {
margin: 0 auto;
width: 900px;
}
solution4
6 2009-09-14 20:15:28
The key is the margin: 0 auto; on the inner div. A proof-of-concept example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div style="background-color: blue; width: 100%;">
<div style="background-color: yellow; width: 940px; margin: 0 auto;">
Test
</div>
</div>
</body>
</html>
solution5
4 2011-10-14 18:34:03
.outerdiv {
margin-left: auto;
margin-right: auto;
display: table;
}
Doesn't work in internet explorer 7... but who cares ?
solution6
3 2009-09-14 20:13:36
Just add margin: 0 auto; to the inside div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.