Project: Survey (help)!

HTML-CSS
1

Click here to my project

Hello guys!
So the link is my survey project.
I was trying to put the logo up next to the header, but it just keep pushing the header to the right. How can I put the logo next to it without pushing the text to the right using css?
many many many thanks!!!

2

I’m trying to understand. This:

<header class="header text-center">

is causing the group of the icon and the text to center. This of course causes the text to shift a little to the right so the icon-text group can be centered.

If that isn’t what you want and you want the text to still be centered relative to the other text (ignoring the icon), then where do you want the icon to go?

1 Like
3

Thank you Kevin!!

I want to make it like

[icon]|survey|
      |center|

because now is like

[icon] |survey|
    |center|

this is making me so uncomfortable haha

4

Yeah, CSS will do that to you.

Yeah, I’m messing around with positioning to see if I can get that to work. Another possibility is creating columns.

1 Like
5

Just now I tried to set position: absolute to the logo, but when I resize the windows it cover the text.

and now I tried to make it

<div class="flex">
   <div>
     <img src="https://www.uniqlo.com.hk/public/image/L1/nav/nav-logo/LOGO.gif" alt="UNIQLO logo">
    </div>
    <div>
    <header class="header text-center">
    <h1 id="title" class="title">
UNIQLO Survey Form<br>優衣庫問卷調查
    </h1>
    </header>
    </div>
    <div>
    </div>
  </div>

.container {
  width: 75vw;
  min-width: 320px;
  max-width: 500px;
  margin: auto;
}

.header {
  font-size: 1rem;
}

.text-center {
  text-align: center;
}
.flex {
  display: flex;
  justify-content: center;
}

so if I can make the third div (inside the big div) the same width as the first div, I should be able to center the header-text? like really really center?

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.