Question

我的＆＃34;＃pojat＆＃34; -part不会中心。我试过了＃34;宽度：700px; margin-left：auto; margin-right：auto;＆＃34;也使用％不会改变任何东西，PLZ helpme。

它不会成为中心，它主要是＆＃34;大多数＆＃34;中心，我不知道wtf阻止我的div居中。

＆＃13;

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%:
		
	}

＆＃13;

<!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>

＆＃13;

Answer 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>

Answer 2

在考虑了我的答案之后，如何改为：

#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，大小足以包围内部div。
使用display:inline-block;代替inline。

（我原来的答案是错的，遗漏了提交的样式表的一半）

Answer 3

您是否尝试过margin-left：25％？

Answer 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

Answer 5

Ops :)你的代码还可以

#pojat居中。你觉得它不是的原因是你在width:95%

时无法理解它

将此添加到CSS：

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

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

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

如何集中我的DIV，它不会去

5 个答案: