Question

我遇到了图像第二部分的问题，左侧的彩色块开始，然后是中间的4个居中图像和右侧的3个段落。我无法让它们水平对齐，我甚至尝试使用它们的宽度/高度+溢出：自动。

<!doctype html>
<head>
<title>onze titel</title>
<meta charset="UTF-8">
<meta name="description" content="deze html oefenpagina werd gemaakt om de mogelijkheden met audio en video te zien">
<link rel="stylesheet" href="css/sheet2.css" type="text/css">
</head>
<body>
<h1>titel van de webpagina</h1>
in kleur</br></br></br>
<div id="inhoud">

<div id="cyaan"></div>
<div id="magenta"></div>
<div id="geel"></div>
<div id="rood"></div>
<div id="groen"></div>
<div id="blauw"></div>


<div id="midden">
<div id="afb1"></div>
<div id="afb2"></div>
<div id="afb3"></div>
<div id="afb4"></div>
</div>

</div>
</body>
</html>

这是CSS：

#inhoud {
    width: 500px;
    border: 1px solid black;
    overflow: auto;
}
#cyaan {width: 120px;
height: 25px;
background: cyan;}

#magenta {width: 120px;
height: 25px;
background: magenta;}

#geel {width: 120px;
height: 25px;
background: yellow;}

#rood {width: 120px;
height: 25px;
background: red;}

#groen {width: 120px;
height: 25px;
background: green;}

#blauw {width: 120px;
height: 25px;
background: blue;}

#midden {  
  margin-left: auto ;
  margin-right: auto ;
        width: 100%;  
    }  

#afb1 {  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/lima.jpg');
    }  

#afb2 {  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/schu.jpg');
    }  

#afb3 {  
    clear: left;  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/car.jpg');
    }  

    #afb4 {  
    float: left;  
    width: 15%;  
    height: 100px;  
    background-image: url('../img/model.jpg');
    }

enter image description here

Answer 1

尝试使用<center>。

这样的事情：

<center>
    <h1>Hello world!</h1>
</center>

Answer 2

以下是一些可以帮助您获得更多信息的代码:)您只需要阅读有关文档流程，css位置和显示属性的更多信息。

http://codepen.io/anon/pen/rVerQN

#midden {
  /*margin-left: auto;
  margin-right: auto;
  display: inline;*/
  position: absolute;
  top: 90px;
  left: 150px;
  width: 200px;
}

#afb1 {
  float: left;
  width: 50%;
  height: 100px;
  background-color:blue;
  background-image: url('../img/lima.jpg');
}

#afb2 {
  float: left;
  width: 50%;
  height: 100px;
  background-color:orange;
  background-image: url('../img/schu.jpg');
}

#afb3 {
  clear: left;
  float: left;
  width: 50%;
  height: 100px;
  background-color:green;
  background-image: url('../img/car.jpg');
}

#afb4 {
  float: left;
  width: 50%;
  height: 100px;
  background-color:darkred;
  background-image: url('../img/model.jpg');
}

CSS和div的问题

2 个答案: