水平居中4 Div内的Div

时间:2016-02-06 18:21:14

标签: html css

我需要为学校创建一个小型投资组合,在顶部我想创建一个包含4个类别的菜单(见图片)。

http://fs5.directupload.net/images/160206/ixtj8mtk.jpg

基本上我已经创建了一个" main" div(100%宽度)并且在这个主div中我创建了4个盒子,现在我需要将4个div放在彼此旁边并将它们放在主div中,但是我无法让它工作,atm it是居中但是4个div在彼此之上而不是彼此左/右。



.mainmenu {
	background-color: grey;
	width: 100%;
	margin: 0;
	min-height: 50px;
	float: left;
}

.mainbox {
	background-color: grey;
	width: 100px;
	margin: 0 auto;
	min-height: 30px;
	float: none;
}

@media screen and (max-width: 800px) {
  
 .mainbox {
	background-color: #DABA11;
	width: 200px;
	font-style: italic;
 }

}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Portfolio</title>
	<link rel="stylesheet" href="style.css">
</head>

<body style="text-align: center;">

<div class="mainmenu">

	<div class="mainbox"> 
    WHAT
    </div>
    
    <div class="mainbox">
    WHO
    </div>
    
  	<div class="mainbox">
    WHEN
    </div>
    
    <div class="mainbox">
    WHY
    </div>  
    
    
</div>

</body>

</html>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

请参阅此fiddle

查看代码here

按如下方式更改CSS

.mainmenu {
    background-color: grey;
    width: 100%;
    margin: 0;
    min-height: 50px;
    text-align: center;
}

.mainbox {
    background-color: grey;
    width: 100px;
    margin: 0 auto;
    min-height: 30px;
    float: none;
    display:inline-block;
}

默认情况下,div具有display:block样式,强制div为新行。因此,我所做的是为{{1}添加text-align: center;而不是float:left并为.mainmenu添加display:inline-block;,强制div为内联。

答案 1 :(得分:0)

有很多方法可以实现你想要的,最简单的方法就是使用flexbox。只需将display: flex;添加到.mainmenu类。

答案 2 :(得分:0)

使用设置宽度生成内部div内联块元素:

.mainmenu {
    width: 100%;
    padding: 0;
}

.mainbox {
    display: inline-block;
    width: 25%;
    margin: 0;
}

答案 3 :(得分:0)

div被叠加在一起的主要原因主要有一个原因。

div是一个块元素。这意味着默认情况下其CSS设置为display:block;

要解决此问题,只需将每个div的css添加到display:inline-block;display:inline;