Impossible to center this text

Question

I developped this template which works fine here : https://template-admin-dom.herokuapp.com/6#

As you can see, the text in the top navbar is not centered.

It seems easy but I can't do it.

This text has this class :

.wrapper .section .top_navbar .navbartitle{
font-size: 28px;
color: #f4fbff;
text-align: center;}

and the html is :

 <span class="text-truncate navbartitle">Title to center</span>

Can you inspect the page and help me ? I do not understand why it does not work.

score 2 · Answer 1 · answered Dec 05 '21 at 09:29

2

you can try this :

.wrapper .section .top_navbar .navbartitle
    {
       font-size: 28px; 
       color: #f4fbff;
       text-align: center;
       width:100%;
    }

answered Dec 05 '21 at 09:29

Anonymous

539
2
6

thanks Prakash it works. Can you explain why the "width:100%" is mandatory ? – Dom Dec 05 '21 at 09:33
span width is the default so ` text-center ` does not work; – Anonymous Dec 05 '21 at 09:40

score 2 · Accepted Answer · answered Dec 05 '21 at 09:34

2

It doesn't center because the parent container is a flex container. One way to center the title is to add margin: auto to the element that has the navbartitle class:

answered Dec 05 '21 at 09:34

Juan Marco

3,081
2
28
32

score 0 · Answer 3 · answered Dec 05 '21 at 09:28

0

CSS

.wrapper .section .top_navbar .navbartitle
{
font-size: 28px;
color: #f4fbff;
padding-left: 250px;
}

HTML

<span class="text-truncate navbartitle">Title to center</span>

answered Dec 05 '21 at 09:28

BiswajitPaloi

586
4
16

score 0 · Answer 4 · answered Dec 05 '21 at 09:35

0

The issue is that the element won't take full width due to flex. Here's a way to have it behave as desired:

.wrapper .section .top_navbar .navbartitle {
  flex-grow: 1;
}

answered Dec 05 '21 at 09:35

TheRemoteCoder

172
2
12

score 0 · Answer 5 · answered Dec 05 '21 at 09:41

0

It doesn't center because it's a span in a flex container.

try turning the span into a div, and add this:

div.text-truncate.navbartitle {
  flex-grow: 1;
}

answered Dec 05 '21 at 09:41

Diklou

21
6

Impossible to center this text

5 Answers5