Centering text problem

HTML-CSS
1

Hello everyone! I run into a problem while trying to position some texts on “banner-img”.
I can’t put texts (“Happy Kitchen”) on the center of “banner img” without affecting links in , so I comment out CSS code to keep the links safe. but you can see the texts are under the image due to CSS is commented out. I also find out that the problem is “position: relative” of “.banner-container” . Please help me understand this issue. Thank you!

<header>

        <h1>WELCOME TO MY PLACE!</h1>

        <nav>

            <img class="logo" src="https://cdn.pixabay.com/photo/2016/03/18/01/09/cupcake-1264214__340.png" alt="logo">

            <a href="#about">About us</a>

            <a href="#product">Our products</a>

            <a href="#contact">Contact</a>

        </nav>

        <div class="banner-container">

            <img class="banner-img" src="https://cdn.pixabay.com/photo/2019/02/25/17/36/mockup-4020150__340.jpg" alt="banner">

            <p class="banner-text">Happy Kitchen</p>

        </div>

    </header>

* {

    margin: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    color: yellowgreen;

    background-color: antiquewhite;

    font-family: 'Segoe UI', Verdana, sans-serif;

}

/********** style for header **********/

h1 {

    text-align: center;

    font-size: 100px;

}

.logo {

    width: 50px;

    float: left;

    margin: 0 20px 20px 20px;

}

nav a{

    float:left;

    padding: 0 20px;

    font-size: 35px;

    margin-top: 20px;

    text-decoration: none;

    color: yellowgreen;

}

a:hover {

    color: pink;

    background-color:teal;

}

.banner-img {

    width: 100%;

}

/***** 

.banner-container {

    position: relative;

    text-align: center;

}

.banner-text {

    position: absolute;

    top: 50%;

    left: 50%;

    font-size: 100px;

    transform: translate(-50%, -50%);

}

*****/
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
3

I really didn’t know how to post my code to forum. You are the first helper. Thank you so much!

4

The position: relative is creating a new stacking context that puts the banner-container on top of the nav. Try giving the element a background color so you can better see what is happening.

The reason in this case it is a problem is because you are floating the image and links so they are taken out of document flow and their container (the nav) collapses and does not push down the content below it.

If you clear the container (using a clear fix or just overflow: hidden) it should fix it.

nav {
  overflow: hidden;
}

Edit: BTW, I would suggest using something other than float for doing layout. Look into Flexbox and CSS Grid. Using floats is an old and bug-prone way of doing layout that really is not needed anymore.

1 Like
5

Wow, it’s magic! Problem solved. Thank you once again!
Ah, yes, I’ve finished all the challenges in CSS part, but it takes time to understand and apply those knowledge to a real project. So at this moment, I’m trying to understand float and other basic positioning properties. I will move to Grid and Flexbox after these.

1 Like
6

It’s not magic I’m afraid. If you are going to use (or learn about) floats you need to know about all the different issues they cause and how to work around and fix them.

It’s good to know a little bit about floats so you can work on old code, or if you have to support really old browsers. But for new projects, I would not use float for layout. They are simply not needed. I’d suggest limiting the use of floats for their intended purpose which is floating text around elements.

Happy Coding!

2 Likes
7

Yup, I will try to use Grid and Flexbox more often.