0

I've looked through many posts on this topic but the traditional solutions don't seem to be working. I'm most likely doing something wrong but I can't see what. I'm trying to center the text within a div while keeping it left justified. Here is my code/markup:

HTML

<div class="home">
    <div class="title">
        Hi, I'm <a href="#">name</a>.  This is some of my <a href="#">work</a>.
    </div>
</div>

CSS

.home {
    padding: 120px 75px 0px 75px;
    margin: 0 0 200px 0;
    width: calc(100% - 150px);
    height: auto;
    text-align: center;
}
   .title {
   display: inline-block;
   text-align: left;
   color: var(--text-primary);
}

At the moment I have it set up so the text within the title div is left justified, and the title div is centered within the home div (at least I think that's what's going on.) I've also tried flex box, but to no avail. I think the issue has to do with the fact that the text in the h1 tag wraps, leaving space on the right side (selected in red below). Here is what I mean:

Thank you for looking, I appreciate any suggestions!

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
TheRedTopHat
  • 45
  • 7
  • 1
    Try an extra wrapper inside title, and set display:flex; justify-content: center; on .title; – Sean Doherty Apr 30 '20 at 16:26
  • Does this answer your question? [CSS: Center block, but align contents to the left](https://stackoverflow.com/questions/1269589/css-center-block-but-align-contents-to-the-left) – monkey Apr 30 '20 at 16:48
  • PythonMaster202 I looked at that and tried to replicate it but it didn't work. Thank you for the comment though. – TheRedTopHat Apr 30 '20 at 17:09
  • @SeanDoherty I tried that but no dice, text is still not centered. Thank you for the suggestion though. – TheRedTopHat Apr 30 '20 at 18:29
  • Can you build a codepen? Because I copied your code and it kind of works anyway, but looks nothing like your example - so i think there are conflicting styles from elsewhere? – Sean Doherty Apr 30 '20 at 18:46
  • Sure, here you go. Thank you for looking. (i've made a few changes based on other people's suggestions but the problem still persists.) https://codepen.io/roadrunner645/pen/BaowNOg – TheRedTopHat Apr 30 '20 at 19:39

5 Answers5

0

I think u need this.

.home {
    padding: 50px 0;
    margin: 0 0 200px 0;
    width: calc(100% - 150px);
    height: auto;
    display: flex;
    justify-content: center;
    background:red;
}
.title {
   display: inline-block;
   color: var(--text-primary);
   background: yellow;
   width: calc(100% - 100px);
   text-align: center;
}
<div class="home">
    <div class="title">
        Hi, I'm <a href="#">name</a>.  This is some of my <a href="#">work</a>.
    </div>
</div>
Yadab Sd
  • 591
  • 4
  • 9
0
.title {
    display: inline-block;
    text-align: center;
    color: var(--text-primary);
    float:left;
}
Mickael B.
  • 4,755
  • 4
  • 24
  • 48
Evangelos
  • 1
0

I usually try this when i want to center anything so i hope it works with you.

.home{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Amr Samy
  • 11
  • 2
0

Try giving "home" width:100% and to "title" margin-left:auto; margin-right:auto

Amarnath Vishwakarma
  • 39
  • 5
0

I managed to get this to work by "shrink-wrapping" the title div to the text that is inside, so that the text was centered within it, and then use the home div as a flex box within which the title div was centered. 

.home {
    padding: 5% 0;
    margin-top: 10%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.title {
    width: max-content;
}

Hope this helps anyone else having this problem!

TheRedTopHat
  • 45
  • 7