How to make a split left-right text on two lines? - html

Question

Need to center this text in this way:
Basically, the top part to the left and the bottom part to the right, but with a bit of overlap.
How can I do that in HTML/CSS?

Answer 1

You can center the text vertically by using the centering with transform technique. Then the text should be separated into two lines and aligned to left/right plus a small negative margin so it overflows outside of the circle.
div {
height: 130px;
width: 130px;
background: lightblue;
position: relative;
border-radius: 50%;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
width: 100%;
}
span {
display: block;
}
span:first-of-type {
text-align: left;
margin-left: -7px;
}
span:last-of-type {
text-align: right;
margin-right: -7px;
}
<div>
<p>
<span>La crèativitè</span>
<span>est contagieuse</span>
</p>
</div>

Answer 2

Simply use 2 elements for those 2 lines and add a margin-left to the second element:
.logo p {
margin: 0;
}
.logo p:nth-of-type(2) {
margin-left: 3.5em;
}
/* for demonstration purpose only */
html {
font-size: 40px;
font-family: Arial;
}
<div class="logo">
<p>La crèativitè</p>
<p>est contagieuse</p>
</div>

Answer 3

Another entirely different (and more complicated) approach is to use flex-box. It requires you to use containers and to know the principles of flex-box. But once you know what you're doing, it becomes fairly simple to center things inside of other things.
If you need somewhere to practice flex-box with simple games, you can visit https://flexboxfroggy.com/.
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.logo {
width: 200px;
height: 200px;
background-color: maroon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
font-size: 20px;
}
#p1 {
align-self: flex-start;
}
#p2 {
align-self: flex-end;
}
<div class="container">
<div class="logo">
<p id="p1">La crèativitè</p>
<p id="p2"> est contagieuse</p>
</div>
</div>
Bonne Chance!