Search code examples
htmlcssflexbox

How can I align a text inside a div that has 2 text span

I have a div that contains 2 text <span> I want the first text to be left aligned with margin from left. and the second text to be aligned in center begining from the end of 1st text to the rigth-margin.

<main style="padding-top:1px;">
    <div class="custom1">
        <span class="text1" style="margin-right: 150px;">Text1</span>
        <span class="text2" style="align-items: center; align-items: center;
align-self: center; vertical-align: middle;">text2</span>    
    </div>
</main>
CSS:

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

.text1 {
    color: #222222;
    font-size: 48px;
    font-weight: bold;
      display: inline-block;
      vertical-align: middle;
    font-family: Oswald;
 }

 .text2 {
    color: #222222;
    font-size: 22px;
      display: inline-block;
      vertical-align: middle;
    font-family: Oswald;
    text-align: justify;
    text-justify: inter-word;
  }

The text1 is correct, the text2 is completly broken, its not aligned on center. I'm new to creating website so I don't know whats wrong.

URL to image of website: https://postimg.cc/3k4d0sP2 How can I extend the text2 to the purple box and center it in center of that whole block

I want the text2 to be center on it max size, but I dont know how. I want the website to look like in a image: I tried aligning items, contents etc... Image below says text2 somewhere here.

[I want the website to be like this.]

Solution

  • add margin:auto; for text2.

    revised css:

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

.text1 {
    color: #222222;
    font-size: 48px;
    font-weight: bold;
      display: inline-block;
      vertical-align: middle;
    font-family: Oswald;
 }

 .text2 {
    color: #222222;
    font-size: 22px;
      display: inline-block;
      vertical-align: middle;
    font-family: Oswald;
    text-align: justify;
    text-justify: inter-word;
    margin:auto;
  }