Center Div inside another (100% width) div

2019-01-30 11:24发布

站内问答 / HTML/CSS
591 6 6

Quite a "simple" problem here and not sure why it's being so complicated.

  1. Have a 100% (width) sized div.
  2. Have another div positioned in the middle of this div (sized 940px width)

Any ideas? :)

标签： css xhtml
举报
6条回答
太酷不给撩
2楼-- · 2019-01-30 11:31 
.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Doesn't work in internet explorer 7... but who cares ?

查看更多
0人赞 添加讨论(0) 举报
Bombasti
3楼-- · 2019-01-30 11:36

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;
}
查看更多
0人赞 添加讨论(0) 举报
beautiful°
4楼-- · 2019-01-30 11:38 
.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2019-01-30 11:52

The below style to the inner div will center it.

margin: 0 auto;
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
6楼-- · 2019-01-30 11:53

Just add margin: 0 auto; to the inside div.

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
7楼-- · 2019-01-30 11:55

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)