TransWikia.com

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

Stack Overflow Asked on December 13, 2021

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

2 Answers

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;


}

Answered by Obsesie on December 13, 2021

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>

Answered by framelita on December 13, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP