CODEWITHSUNDEEP
javascripthtmljquerycss
Obsesie
Obsesie

Reputation: 188

Set div with text to start where another div that is positioned center starts

I've got some text that is positioned center of the container and I would like to have some other text that starts where the text positioned in center starts (these divs are not having the same length so here is the problem) I tried by adding jquery to get the X position but no success, and I have no clue how to solve it only with css.

Here's my code:

 <div class="graphic-icons-page">
    <div class="container icons-container">
    <div class="icons-software-title-left">Wide</div>
      <div class="icons-software-title-center text-center"><span>Text in center</span></div>
    </div>
  </div>


.icons-container{
  height:80vh;
  background-color: black;
  color:white;
 
  
  
}
.graphic-icons-page{  
  display: flex;
  justify-content: center;
  align-items: center}

  ///test 

.icons-software-title-center{
  width: 100%;
}
.icons-software-title-left{ font-size: 50px;}
.icons-software-title-center{
  font-size:50px
}

Here's how I want to look:

enter image description here

Upvotes: 1

Views: 302

Answers (2)

Obsesie
Obsesie

Reputation: 188

I solved my issues using width:max-content

.container-center {
  text-align: center;
  width: 100%;
  background-color: black;
}
.icons-container{
  height:80vh;
  background-color: black;
  color:white;
  display: inline-block;
  text-align: left;
  width: max-content;


}

Upvotes: 0

framelita
framelita

Reputation: 120

I added one div and move the icons-container inside the other container. Would this work?

In this fiddle, I added bootstrap css to test https://jsfiddle.net/1aywg3Lm/

body {

   background-color: black;

}
.container-center {
  text-align: center;
}
.icons-container{
  height:80vh;
  background-color: black;
  color:white;
  display: inline-block;
  text-align: left;
}
.graphic-icons-page{  
  display: flex;
  justify-content: center;
  align-items: center}

  ///test 

.icons-software-title-center{
  width: 100%;
}
.icons-software-title-left{ font-size: 20px;}
.icons-software-title-center{
  font-size:20px
}
<div class="graphic-icons-page">
    <div class="container">
      <div class="icons-container">
        <div class="icons-software-title-left">Wide</div>
        <div class="icons-software-title-center text-center"><span>Text in center of the page</span></div>
      </div>
    </div>
  </div>

Upvotes: 0

Related Questions