CODEWITHSUNDEEP
htmlcssflexbox
Miles.Kelly
Miles.Kelly

Reputation: 111

Trouble centring text over an image in a flexbox page layout

I have tired a few of the different solutions on here but I can't get anything to work. So I was wondering if anyone had any other ideas.

I have created a the makings of a webpage using flexbox to lay everything out so it is nice and responsive.

However I am stuck, in one of my flexbox containers I would like to have a image centred with text centred over the top of that.

This container is the "container-stack pink" container with the "bulb" img and text

Here is a link to a codepen of my webpage. I have added placeholder images and havent copied any of the Javascript in as it isnt really import for the layout

Thanks for any help/suggestions in advance...

<html>
    <head>
        <link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
    </head>
    <body>
    <div class="container green">
        <div class="right-side">
            <img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
        </div>
        <div class="centered mash">
            <img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">        
        </div>
    </div>  
    <div class="container pink">
            <div class="centered fancy-header">
            <p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
            </div>
            <div class="centered fancy-body">
                <p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>        
            </div>
            <div class="centered scroll">
                    <p id="fancy-text3">keep scrolling</p>
                    button here
            </div>
    </div>  
    <div class="container-row blue">
            <img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
            <div id="brief-text">
                <p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
                <p class="body">tasty</p>
                <p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
            </div>
        </div> 
    <div class="container-stack pink">
        <div id="wrapper">
            <img id="bulb" src="http://via.placeholder.com/500x300" alt="bulb-img">
            <div id="bulb-text">
                    <p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
                    <p>Andouille prosciutto<br>ground round jowl jerky.</p>   
            </div>
        </div>

    </div>  
    <div class="container generator">
            <div class="centered text">
                <div class="word-1">Peanut Butter</div>
                <div class="word-2">Water Lily Seeds</div>
            </div>
            <div class="centered">
                <button class="button">Mash!</button>        
            </div>

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

CSS:

body {
    font-family: bebas-neue-by-fontfabric;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0;
}

.blue {
    background-color: skyblue;
}

.pink {
    background-color: pink;
}

.green {
    background-color: chartreuse;
}

.container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
   margin: 0;
   padding: 0;
}
.container-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
 }
 .container-stack {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
 }

.centered {
    flex: 0 0 100%;
    align-self: center;
}

.right-side {
    border: 1px solid blue;
    flex: 0 0 100%;
    align-self: flex-end;

}
.left-side {
    border: 1px solid orange;
    flex: 0 0 100%;
    align-self: flex-start;

}


#raw-logo {
    width: 13.3vw;
    max-width: 150px;

}

#mash-logo {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;

}

 .fancy-header{
    border: 1px solid blue;
    font-size: 15vw; 
}

.fancy-body {
    border: 1px solid red;
    font-size: 3vw;  
}

#fancy-text1 {
    margin: 0;
}

#fancy-text2 {
    margin-top: 7vw;
}

#masher {
    width: 40%;
    margin-left: 10%;
}

#brief-text {
    margin-left: 5%;
    margin-right: 10%;
    align-self: center;
}

#header {
    font-size: 11vw;
}

#subheader {
    font-size: 5vw;
}

.body {
    font-size: 2.5vw;
}

#wrapper {
    position: relative;
}

#bulb {
    width: 40%;

}

Upvotes: 0

Views: 51

Answers (4)

Nate Whittaker
Nate Whittaker

Reputation: 1966

...I would like to have a[sic] image centred[sic] with text centred[sic] over the top of that.

The following changes should move the text above image and keep it centered.

#wrapper {
    ...
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}


body {
    font-family: bebas-neue-by-fontfabric;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0;
}

.blue {
    background-color: skyblue;
}

.pink {
    background-color: pink;
}

.green {
    background-color: chartreuse;
}

.container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
   margin: 0;
   padding: 0;
}
.container-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
 }
 .container-stack {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
 }

.centered {
    flex: 0 0 100%;
    align-self: center;
}

.right-side {
    border: 1px solid blue;
    flex: 0 0 100%;
    align-self: flex-end;

}
.left-side {
    border: 1px solid orange;
    flex: 0 0 100%;
    align-self: flex-start;

}


#raw-logo {
    width: 13.3vw;
    max-width: 150px;

}

#mash-logo {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;

}

 .fancy-header{
    border: 1px solid blue;
    font-size: 15vw; 
}

.fancy-body {
    border: 1px solid red;
    font-size: 3vw;  
}

#fancy-text1 {
    margin: 0;
}

#fancy-text2 {
    margin-top: 7vw;
}

#masher {
    width: 40%;
    margin-left: 10%;
}

#brief-text {
    margin-left: 5%;
    margin-right: 10%;
    align-self: center;
}

#header {
    font-size: 11vw;
}

#subheader {
    font-size: 5vw;
}

.body {
    font-size: 2.5vw;
}

#wrapper {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

#bulb {
    width: 40%;

}
<html>
    <head>
        <link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
    </head>
    <body>
    <div class="container green">
        <div class="right-side">
            <img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
        </div>
        <div class="centered mash">
            <img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">        
        </div>
    </div>  
    <div class="container pink">
            <div class="centered fancy-header">
            <p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
            </div>
            <div class="centered fancy-body">
                <p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>        
            </div>
            <div class="centered scroll">
                    <p id="fancy-text3">keep scrolling</p>
                    button here
            </div>
    </div>  
    <div class="container-row blue">
            <img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
            <div id="brief-text">
                <p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
                <p class="body">tasty</p>
                <p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
            </div>
        </div> 
    <div class="container-stack pink">
        <div id="wrapper">
            <img id="bulb" src="http://via.placeholder.com/500x300" alt="bulb-img">
            <div id="bulb-text">
                    <p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
                    <p>Andouille prosciutto<br>ground round jowl jerky.</p>   
            </div>
        </div>

    </div>  
    <div class="container generator">
            <div class="centered text">
                <div class="word-1">Peanut Butter</div>
                <div class="word-2">Water Lily Seeds</div>
            </div>
            <div class="centered">
                <button class="button">Mash!</button>        
            </div>

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

Upvotes: 0

Shilpa Ka
Shilpa Ka

Reputation: 47

     .container {
      position: relative;
      text-align: center;
      color: black;
    }

     .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

   <div class="container">
                          <img src="http://via.placeholder.com/500x300" alt="Snow" style="width:100%;">
                          <div class="centered">
                            <p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
                            <p>Andouille prosciutto<br>ground round jowl jerky.</p>
                          </div>
                        </div>

Upvotes: 1

David
David

Reputation: 801

Why don't you just use background images? 

body {
    font-family: bebas-neue-by-fontfabric;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0;
}

.blue {
    background-color: skyblue;
}

.pink {
    background-color: pink;
}

.green {
    background-color: chartreuse;
}

.container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
   margin: 0;
   padding: 0;
}
.container-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
 }
 .container-stack {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
 }

.centered {
    flex: 0 0 100%;
    align-self: center;
}

.right-side {
    border: 1px solid blue;
    flex: 0 0 100%;
    align-self: flex-end;
    
}
.left-side {
    border: 1px solid orange;
    flex: 0 0 100%;
    align-self: flex-start;
    
}


#raw-logo {
    width: 13.3vw;
    max-width: 150px;
    
}

#mash-logo {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    
}

 .fancy-header{
    border: 1px solid blue;
    font-size: 15vw; 
}

.fancy-body {
    border: 1px solid red;
    font-size: 3vw;  
}

#fancy-text1 {
    margin: 0;
}

#fancy-text2 {
    margin-top: 7vw;
}

#masher {
    width: 40%;
    margin-left: 10%;
}

#brief-text {
    margin-left: 5%;
    margin-right: 10%;
    align-self: center;
}

#header {
    font-size: 11vw;
}

#subheader {
    font-size: 5vw;
}

.body {
    font-size: 2.5vw;
}

#wrapper {
    position: relative;
}

#bulb {
    width: 40%;

}

.container-stack #wrapper{
  background-image:url("http://via.placeholder.com/500x300");
  background-size:cover;
  background-position:center;
  padding: 3vw;
}
<html>
    <head>
        <link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
    </head>
    <body>
    <div class="container green">
        <div class="right-side">
            <img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
        </div>
        <div class="centered mash">
            <img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">        
        </div>
    </div>  
    <div class="container pink">
            <div class="centered fancy-header">
            <p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
            </div>
            <div class="centered fancy-body">
                <p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>        
            </div>
            <div class="centered scroll">
                    <p id="fancy-text3">keep scrolling</p>
                    button here
            </div>
    </div>  
    <div class="container-row blue">
            <img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
            <div id="brief-text">
                <p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
                <p class="body">tasty</p>
                <p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
            </div>
        </div> 
    <div class="container-stack pink">
        <div id="wrapper">
            
            <div id="bulb-text">
                    <p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
                    <p>Andouille prosciutto<br>ground round jowl jerky.</p>   
            </div>
        </div>

    </div>  
    <div class="container generator">
            <div class="centered text">
                <div class="word-1">Peanut Butter</div>
                <div class="word-2">Water Lily Seeds</div>
            </div>
            <div class="centered">
                <button class="button">Mash!</button>        
            </div>
            
    </div> 
  </body>
</html>

I have added some padding to the Wrapper so the text is not so bunched to the end of the tag. 

.container-stack #wrapper{
  background-image:url("http://via.placeholder.com/500x300");
  background-size:cover;
  background-position:center;
  padding: 3vw;
}

Upvotes: 0

sonic
sonic

Reputation: 1431

Perhaps there is a few way of doing it. If your image is big enought and you don't want to make it as background you could do something like that

#bulb-text{
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}

Upvotes: 0

Related Questions