CODEWITHSUNDEEP
htmlcssimage
Marius
Marius

Reputation: 71

Aligning Images beside eachother

I can start this post by saying to the few people who've might come over my other post about this. And yes, I am asking it another time, Because it's a different problem, but in the same category.

It seems like aligning text under images ruins everything when I try to fit it. Here is a picture of the site without the text under the images: Image of the Crew Page

Here is the code for the crew page, before the text: 

<section id="crew">
    <h1 style="color:#fff">Crew</h1>
<br>
<div style="justify-content:center" class="container5">

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <br><br><br><br><br>

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">

    </div>        
</section>

Now here is an image of the page after I've tried fitting text under the images: Image of the Crew Page after Text has been added

Here is the code for the section after the text has been added:

<section id="crew">
    <h1 style="color:#fff">Crew</h1>
<br>
<div style="justify-content:center" class="container5">

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <br><br><br><br><br>

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>

    </div>        
</section>

So as you can see, the text ruins everything, and I just don't understand why it keeps doing this. Any thoughts? Thanks for taking your time reading the post

Upvotes: 0

Views: 65

Answers (2)

mohaa8844
mohaa8844

Reputation: 441

In the beginning put both and tag inside tag (each one in figure) like this:

<figure>
  <img src="test.bmp" />
  <figcaption>
    hELLO
  </figcaption>
</figure>
<figure>
  <img src="test2.bmp" />
  <figCAPTION>
    hELLO
  </figCAPTION>
  </figure>

then set the style of the the tag to be floating on left like this:

figure{float:left;}

and you should get what do you want. By the way see (block and inline tags) in HTML and (float,position) in CSS.

Upvotes: 0

ivanibash
ivanibash

Reputation: 1491

This happens because <figcaption> is display: block by default, which means it takes up the whole width of the parent element. I suggest you wrap an image with a corresponding caption in a div.

.cont {
  display: inline-block;
  text-align: center;
}
<section id="crew">
    <h1 style="color: black">Crew</h1>
<br>
<div style="justify-content:center" class="container5">
<div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <br><br><br><br><br>

<div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>

    </div>        
</section>

See this fiddle.

Upvotes: 2

Related Questions