CODEWITHSUNDEEP
htmlcss
user9121150
user9121150

Reputation:

Can't align my images horizontally?

I'm having problems aligning my images/text vertically, they seem to just ignore the code and do what they want.

Does anyone know if I've missed something? As I just can't seem to figure it out. Please check the images here for what I get/want to achieve: https://i.sstatic.net/8I9ev.jpg

I've looked online but the tutorials aren't that great and don't really work for what I want to achieve. Any help is appreciated, thanks. :)

body {
    background: gray;
}

.content {
    display: inline;
}

.group-content {
    position: absolute;
    left: 50%;
    max-width: 960px;
}

.group-content h3 {
    font-weight: normal;
    font-size: 20px;
    color: white;
}

.group-content p {
    font-weight: lighter;
    font-size: 20px;
    color: white;
}
<div class="group-content">
    <div class="content">
        <img src="images/arma.png">
        <h3>Arma 3: Exile Server</h3>
        <p>A project for improving the exile mod.</p>
    </div>

    <div class="content">
        <img src="images/soon.png">
        <h3>Reserved Space</h3>
        <p>Reserved space for future projects</p>
    </div>

    <div class="content">
        <img src="images/soon.png">
        <h3>Reserved Space</h3>
        <p>Reserved space for future projects</p>
    </div>
</div>

Upvotes: 0

Views: 65

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

No need to use absolute positions to move element to center place. Just use text-align:center and apply content as inline-block element and apply width for that like below.

 .content {
   display: inline-block;
   width:30%;
   vertical-align:top;
   text-align:center;
 }

 .group-content {
   max-width: 960px;
   text-align:center;
 }

DEMO

Upvotes: 1

Related Questions