如何使我的 DIV 居中，它不会去答案

【问题标题】：How to center my DIV, it wont go如何使我的 DIV 居中，它不会去
【发布时间】：2014-11-27 15:22:43
【问题描述】：

我的“#pojat”部分无法居中。我试过“宽度：700px; 左边距：自动； margin-right: auto ;" 也使用 % 不会改变任何东西，请帮助我。

它只是不会居中，它“大部分”居中，我不知道 wtf 正在阻止我的 div 居中。

body,
	html {
		margin:0;
		padding:0;
		color:#000;
		background:#a7a09a;
	}
	#wrap {
		
		margin:0 auto;
		background:#99c;
	}
	#header {
    	padding:5px 10px;
		background:#ddd;
	}
	h1 {
	    margin:0;
		text-align: center;
    }
	
	#pojat {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		background-color: #b0e0e6;
		text-align: justify;
		
		}
	h2 { 
		margin:0 0 1em;
		text-align: center;
	}
	#Ilkka {
		float:left;
		display: inline;
		width:200px;
		padding:10px;
		background:#99c;
	}
	#Lari {
		float:left;
		display: inline;
		width:200px;
		padding:10px;
		background:#99c;
	}
	#Jaakko {
		float:left;
		display: inline;
		width:200px;
		padding:10px;
		background:#99c;
	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:#cc9;
	}
	#footer p {
		margin:0;
    }
	* html #footer {
		height:1px;
	}
	
	@media only screen and (max-width: 600px) {
		max-width: 99%:
		
	}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Responsive Design By Poikabändi</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="wrap">
	<div id="header"><h1>PoikaBändi</h1></div>
	<div id="pojat">
			<div id="Ilkka">
				<h2>Ilkka</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
			</div>
			<div id="Lari">
				<h2>Lari</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
				
			</div>
			<div id="Jaakko">
				<h2>Jaakko</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
			</div>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>
</body>
</html>

【问题讨论】：

你的意思是 div pojat？
旁注：DOCTYPE 不适用于 HTML5...
它居中，但全宽，宽度：50% 你会看到。在居中的 div 内浮动到左侧的块。
是的，我可以看到。但是我怎样才能调整它以使其正常工作
div 居中，但里面的 div 向左浮动。问题就在那里。

标签： html css

【解决方案1】：

一种解决方案是将text-align: center 用于父级，将display: inline-block 用于子级。您也可以将text-align: justify 添加到每个孩子单独或使用一个类：

body,
html {
  margin: 0;
  padding: 0;
  color: #000;
  background: #a7a09a;
}
#wrap {
  margin: 0 auto;
  background: #99c;
}
#header {
  padding: 5px 10px;
  background: #ddd;
}
h1 {
  margin: 0;
  text-align: center;
}
#pojat {
  text-align: center;
  display: block;
}
h2 {
  margin: 0 0 1em;
  text-align: center;
}
#Ilkka {
  display: inline-block;
  width: 200px;
  padding: 10px;
  background: #99c;
  text-align: justify;
}
#Lari {
  display: inline-block;
  width: 200px;
  padding: 10px;
  background: #99c;
  text-align: justify;
}
#Jaakko {
  display: inline-block;
  width: 200px;
  padding: 10px;
  background: #99c;
  text-align: justify;
}
#footer {
  clear: both;
  padding: 5px 10px;
  background: #cc9;
}
#footer p {
  margin: 0;
}
* html #footer {
  height: 1px;
}
@media only screen and (max-width: 600px) {
  max-width:99%:
}

<body>
  <div id="wrap">
    <div id="header">
      <h1>PoikaBändi</h1>

    </div>
    <div id="pojat">
      <div id="Ilkka">
        <h2>Ilkka</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
      </div>
      <div id="Lari">
        <h2>Lari</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
      </div>
      <div id="Jaakko">
        <h2>Jaakko</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
      </div>
    </div>
    <div id="footer">
      <p>Footer</p>
    </div>
  </div>
</body>

【讨论】：

它没有做任何我想要的事情@AlexChar
您不想在div 中使用id #pojat 将元素居中？
它可以工作，并且与我的解决方案相比还有一个额外的功能：当窗口很小时，内部divs 包裹得很好——更适合响应式设计，正如 Ilkka 的标题所暗示的那样。跨度>

【解决方案2】：

您是否尝试过 margin-left: 25%？

【讨论】：

【解决方案3】：

三思而后我的回答，换成：

#pojat {
  width: 669px;
  margin-left: auto;
  margin-right: auto;
  background-color: #b0e0e6;
  text-align: justify;
}

#Ilkka {
  display: inline-block;
  width:200px;
  padding:10px;
  background:#99c;
}

#Larri 和 #Jaakko 也是如此。

区别在于：

外部div 的固定宽度，刚好足以包围内部divs。
使用display:inline-block; 而不仅仅是inline。

（我原来的答案是错的，缺少提交的样式表的一半）

【讨论】：

没有改变任何东西！ @EricPlaton

【解决方案4】：

身体， html { 边距：0；填充：0；颜色：#000; 背景：#a7a09a; } #wrap {

    margin:0 auto;
    background:#99c;
}
#header {
    padding:5px 10px;
    background:#ddd;
}
h1 {
    margin:0;
    text-align: center;
}

#pojat {
    width: 95%;
    margin: auto 2.5%;
    background-color: #b0e0e6;
    text-align: justify;
    border:1px solid #f00;;
    height: auto;

    }
    #pojat>div{
        width:30%;
        margin: 0 1.5%;
        box-sizing:border-box;
        background:#99c;
        padding:0px;
        float:left;
    }
h2 { 
    margin:0 0 1em;
    text-align: center;
}
#footer {
    clear:both;
    padding:5px 10px;
    background:#cc9;
}
#footer p {
    margin:0;
}
* html #footer {
    height:1px;
}

@media only screen and (max-width: 600px) {
    max-width: 99%:

}s

【讨论】：

【解决方案5】：

Ops :) 你的代码还可以

#pojat 居中。你觉得不是的原因是你看不懂有width:95%

将此添加到 CSS 中：

.clearfix {clear: both;margin: 0;}

然后在 div#pojat 的末尾添加 <div class="clearfix"></div> 。现在，将#pojat 宽度更改为更小的值。例如 50%。检查结果。

这是width:50%;。你可以看到 #pojat 是如何居中的。

【讨论】：