Align <a> in the middle of other <a> with white-space: wrap
Question
I have a nav with li and a elements. I have one a with the name "Quem Somos" and other with "Educação e Carreira", but this last one has white-space: wrap. The alignment of all elements is being taking in the first word, in this case, "Quem somos" is align horizontally with "Educação e".
My doubt is if is possible to align the a "Quem Somos" in the middle of "Educação e Carreira", which has wrap rule. Like, the align will take place between the wrap. Current alignment I just want to align the non-wrap text relate with the wrap text.
<!DOCTYPE html> <html lang="pt-br"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min. css" rel="stylesheet" /> </head> <body> <nav class="nav navbar navbar-light"> <div class="container"> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav align-items-center" id="ul-nav"> <!--<li><a class="nav-link" href="index.html">Home</a></li>--> <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li> <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li> <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li> <li><a class="nav-link" href="transparencia.html">Transparência</a> </li> </ul> </div> </nav> </body> </html>
1 answers
solution1
0 ACCPTED 2019-04-02 15:08:06
Looking at your code it seems you are using Bootstrap, if so, you just add a align-items-center class to the navbar-nav ul and you should get the alignment you expect.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand navbar-dark bg-dark"> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav align-items-center" id="ul-nav"> <!--<li><a class="nav-link" href="index.html">Home</a></li>--> <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li> <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li> <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li> <li><a class="nav-link" href="transparencia.html">Transparência</a></li> </ul> </div> </nav> <!-- This is the same code you provided without the class I added --> <nav class="navbar navbar-expand navbar-dark bg-dark mt-5"> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav" id="ul-nav"> <!--<li><a class="nav-link" href="index.html">Home</a></li>--> <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li> <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li> <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li> <li><a class="nav-link" href="transparencia.html">Transparência</a></li> </ul> </div> </nav>
The code in your question, fixed:
<!DOCTYPE html> <html lang="pt-br"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1"> <!-- You had spaces between bootstrap.min. and css --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <!-- Add navbar-expand to the nav --> <nav class="nav navbar navbar-expand navbar-light bg-success"> <div class="container"> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav align-items-center" id="ul-nav"> <!--<li><a class="nav-link" href="index.html">Home</a></li>--> <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li> <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li> <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li> <li><a class="nav-link" href="transparencia.html">Transparência</a> </li> </ul> </div> </div> </nav> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.