1

I´m just working on my first website. It´s a onepager about Halo just to mess around a bit and learn HTML, CSS and Javascript. I want to create a section, listing all the boxes of the games with a little text next to them. I got two boxes in one picture. That´s what I got now:

    #historyBackground {
    background: url(../images/uff.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    position: absolute;
    }

    #halo-1-2-box {
    height: 50%;
    width: 30%;
    opacity: 0;
    transition: all ease .5s;
    }

    #centerImage {
    vertical-align: middle;
    text-align:center;
    }
    <section id="historyBackground">
    <div id="centerImage">
    <img src="images/history/halo1&2_box.png" alt="Halo Combat Evolved and 
    Halo 2 Box" id="halo-1-2-box">
    <p id="halo-1">Insert Lorem Ipsum here</p>
    <p id="halo-2">Insert Lorem Ipsum here</p>
    </div>
    </section>

(if you wonder what's the opacity 0 and transition doing in the box-id, that's for an animation to just show the image when scrolling down)

Of course there is some style to the text as well, but I don't think it's important for the question since it's just the color, font-family etc.

As you can see, I've added a div in order to center the image without turning it into a block element. However, if I add float left to the first p-element and float right to the second one, they don´t align next to the text, but under it.

Does anyone know how to align the image in the middle of the window and the first text element left to it and the second one right to it? (I know I could just set the margin-top of the text-elements to minus whatever, but that's not that good for responsiveness)

CalvT
  • 2,805
  • 6
  • 35
  • 49
Cleminem
  • 15
  • 3

2 Answers2

2

I m not sure this is what you are asking for, but still there is a display property called flex, you can use that.

#centerImage {
  display: flex;
  align-items: center;
}
<section id="historyBackground">
  <div id="centerImage">
    <p id="halo-1">Insert Lorem Ipsum here</p>
    <img src="http://www.haloforever.com/images/halo_3_dlc_legendary_small.gif" alt="Halo Combat Evolved and 
Halo 2 Box" id="halo-1-2-box">
    <p id="halo-2">Insert Lorem Ipsum here</p>
  </div>
</section>
Jefree Sujit
  • 1,378
  • 4
  • 20
  • 38
-2

I hope this works:

<section id="historyBackground">
<div id="centerImage">
<p id="halo-1">Insert Lorem Ipsum here</p>
<center>
     <img src="images/history/halo1&2_box.png" alt="Halo Combat Evolved and Halo 2 Box" id="halo-1-2-box">
</center>
<p id="halo-2">Insert Lorem Ipsum here</p> </div>
</section>
Martins
  • 430
  • 3
  • 11