Trying to center text horizontally and vertically

HTML-CSS
1

I am new to posting questions so am not sure how to show my code. I have copied a link to my GitHub account leading to the project.
I am trying to center “Welcome to my site” horizontally and vertically so it is equal distance from the image and from the right side.

Thank you very much.

2

As far as I know, text-align: center will work just fine without any added stuff such as display: flex; justify-content: center; .

Using a flex display meddles with your text-align: center;.

1 Like
3

Thank you for your reply.

I tried text align center without display flex but it didn’t center it.
I also want to center it vertically.

4

The best way is flexbox. Chances are it didn’t work because you’re applying it to the text itself (which doesn’t work) or your parent element is taking up too much space. Here’s some code that might work:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
1 Like
5

Textboxes shouldn’t ever be flexed themselves. They should be applied to a container that’s holding the textbox :smiley:

6

Ok I just put your code into a repl and vertical aligned it. Here’s the code changes:

index.html — added #flexbox_test div element holding the div that your text is contained in:

    <section id="welcome-section" class="about">
      <h1 class="about_h1">I am Will Brooks</h1>
      <div class="about_img_h2">
        <div>
          <img src="images/will.jpeg" width="100px" class="about_img" />
        </div>
        <div id="flexbox_test">
          <h2 class="about_h2">Welcome to my site</h2>
        </div>
      </div>
    </section>

Added this code to style.css

#flexbox_test {
  display: flex;
  justify-content: center;
  align-items: center;
}
1 Like
7

Fantastic thank you very much.

I get it now. Flex the container that’s holding the text for it to work.

Awesome, thanks again.

8

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