在容器div中对齐四个正方形div

Question

I want to vertical align four single divs side by side. Each div contains text + image. For some reason, it's not working. There are some divs which located more higher than the others. I want it to look like that:

div's container:

---

DIV DIV DIV DIV

---

<div id="skills-container" class="full-size-properties">
    <h1 class="site-titles">Personal Skills</h1>
    <div id="four-rectangles">
        <div id="front-end" class="single-skills-rectangle">
            <img src="Images/front-end.png" />
            <h1>FRONT-END</h1>
            <h2>CSS3, HTML5, JavaScript</h2>
        </div>

        <div id="back-end" class="single-skills-rectangle">
            <img src="Images/back-end.png" />
            <h1>BACK-END</h1>
            <h2>JAVA</h2>
        </div>

        <div id="design" class="single-skills-rectangle">
            <img src="Images/design.png" />
            <h1>DESIGN</h1>
            <h2>?</h2>
        </div>

        <div id="photography" class="single-skills-rectangle">
            <img src="Images/photography.png" />
            <h1>PHOTOGRAPHY</h1>
            <h2>Canon and Nikon</h2>
        </div>
    </div>
</div>

Here is the CSS:

#skills-container {
    height: 400px;
    background: #F8F8F8 url("../Images/noisy.png");
    top: 5px;

}

#four-rectangles {
    position: absolute;
    top: 60px;
    background-color: yellow;
}

.single-skills-rectangle {
    background-color: #fff;
    width: 200px;
    height: 210px;
    border: 1px solid #CBCBCB;
    border-radius: 10px;
    display: inline-block;
    margin-left: 25px;
    text-align: center;
}

.single-skills-rectangle h1 {
    font-size: 20px;
    font-weight: 700;
    color: #06557c;
    margin-top: 35px;
}

.single-skills-rectangle img {
    margin-top: 30px;
}

.single-skills-rectangle h2 {
    font-size: 15px;
    color: #808080;
    margin-top: 7px;
}

Answer 1

Just add vertical-align: top to the .single-skills-rectangle class.

 body { margin: 0; } #skills-container { height: 400px; background: #F8F8F8 url("../Images/noisy.png"); top: 5px; } #four-rectangles { position: absolute; top: 60px; background-color: yellow; } .single-skills-rectangle { background-color: #fff; width: 120px; height: 210px; border: 1px solid #CBCBCB; border-radius: 10px; display: inline-block; margin-left: 15px; text-align: center; vertical-align: top; } .single-skills-rectangle h1 { font-size: 14px; font-weight: 700; color: #06557c; margin-top: 35px; } .single-skills-rectangle img { margin-top: 30px; } .single-skills-rectangle h2 { font-size: 12px; color: #808080; margin-top: 7px; } 

 <div id="skills-container" class="full-size-properties"> <h1 class="site-titles">Personal Skills</h1> <div id="four-rectangles"> <div id="front-end" class="single-skills-rectangle"> <img src="http://lorempixel.com/70/70/city" /> <h1>FRONT-END</h1> <h2>CSS3, HTML5, JavaScript</h2> </div> <div id="back-end" class="single-skills-rectangle"> <img src="http://lorempixel.com/80/80/city" /> <h1>BACK-END</h1> <h2>JAVA</h2> </div> <div id="design" class="single-skills-rectangle"> <img src="http://lorempixel.com/60/60/city" /> <h1>DESIGN</h1> <h2>?</h2> </div> <div id="photography" class="single-skills-rectangle"> <img src="http://lorempixel.com/50/50/city" /> <h1>PHOTOGRAPHY</h1> <h2>Canon and Nikon</h2> </div> </div> </div> 

Answer 2

One solution is to use a default width for all your images regardless of the size of each image:

.single-skills-rectangle img {
    width: 100px;
}

Code snippet

 #skills-container { height: 400px; background: #F8F8F8 url("../Images/noisy.png"); top: 5px; } #four-rectangles { position: absolute; top: 60px; background-color: yellow; } .single-skills-rectangle { background-color: #fff; width: 200px; height: 210px; border: 1px solid #CBCBCB; border-radius: 10px; display: inline-block; margin-left: 25px; text-align: center; } .single-skills-rectangle h1 { font-size: 20px; font-weight: 700; color: #06557c; margin-top: 35px; } .single-skills-rectangle img { margin-top: 30px; } .single-skills-rectangle h2 { font-size: 15px; color: #808080; margin-top: 7px; } .single-skills-rectangle img { width: 100px;/*add a default image width*/ } 

 <div id="skills-container" class="full-size-properties"> <h1 class="site-titles">Personal Skills</h1> <div id="four-rectangles"> <div id="front-end" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>FRONT-END</h1> <h2>CSS3, HTML5, JavaScript</h2> </div> <div id="back-end" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>BACK-END</h1> <h2>JAVA</h2> </div> <div id="design" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>DESIGN</h1> <h2>?</h2> </div> <div id="photography" class="single-skills-rectangle"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" /> <h1>PHOTOGRAPHY</h1> <h2>Canon and Nikon</h2> </div> </div> </div>