0

Tenho um menu e estou tentando colocra a imagem ao centro e deixar 3 links à esquerda e 3 links à direita, usei:

display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 

Porém ele so fica alinhado na versão mobile, veja abaixo:

/*Main Menu CSS*/
*{
	margin: 0;
	padding: 0;
}
.header-area{
	background:#4DC3CF;
}
.header-area .logotipo {
display: inline-block;
line-height: 55px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main-menu ul{
	text-align: center;
}
.main-menu ul li{
	list-style:none;
	display:inline-block;
	position:relative;
}
.main-menu ul li a{
	text-decoration: none;
	display: inline-block;
	font-size:18px;
	padding:30px 20px;
	margin:0px;
	color:#fff;
	font-weight: 600;
	text-transform: uppercase;
	transition: .4s;
}
.main-menu ul li a:hover{
	color:#000;
}

/*Dropdown Menu CSS*/
.main-menu ul li ul{
	position: absolute;
	left:0;
	top:100%;
	width:200px;
	z-index: 999;
	transform: scaleY(0);
	transform-origin: top center;
	opacity:0;
	visibility: hidden;
	transition: .4s;
	background:#4DC3CF;
	box-shadow: 0 2px 8px -2px rgb(37, 39, 38);
}
.main-menu ul li:hover ul{
	transform: scaleY(1);
	opacity:1;
	visibility: visible;
}
.main-menu ul li ul li a{
	padding:14px 18px;
}
   <header class="header-area">
			<a href="#" class="logotipo"><img src="https://i.imgur.com/eH60XtT.png" alt="logo alt"></a>
        <div class="main-menu">
            <nav>
                <ul>
                    <li><a href="#" title="">Home</a></li>
                    <li><a href="#" title="">About Us</a></li>
                    <li><a href="#" title="">Services</a>
                        <ul>
                            <li><a href="#">Service One</a></li>
                            <li><a href="#">Service Two</a></li>
                            <li><a href="#">Service Three</a></li>
                            <li><a href="#">Service Four</a></li>
                            <li><a href="#">Service Five</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="">Portfolio</a></li>
                    <li><a href="#" title="">Blog</a></li>
                    <li><a href="#" title="">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

Vi post aqui e até onde entendi era pra estar alinhado por causa do top: 50% e left e translate e o display-inline-block faria ele ficar dentro, porém não funcionou.

5
  • Você consegue fácilmente usando bootstrap. visite: getbootstrap.com/docs/4.4/getting-started/download Commented 6/04/2020 às 2:51
  • Conheço o b4, porém nesse caso to usando so HTML e CSS e com B4 vai ter que aplicar o codigo na nav-brand da mesma forma, so não to entendendo o porque o codigo não esta funcioando.
    – user181173
    Commented 6/04/2020 às 3:18
  • @GotaB4 sua pergunta está mal formulada e está difícil de entender o que você quer. Consegue reformular a pergunta? Commented 6/04/2020 às 3:47
  • @KleberOliveira consigo, no caso quero colocar a imagem no meio no menu e deixa os links 3 a direita e 3 a esquerda, posso chama no chat?
    – user181173
    Commented 6/04/2020 às 4:05
  • @GotaB4 tentei response com a pergunta reformulada, veja se é a sua necessidade. Commented 6/04/2020 às 4:32

2 Respostas 2

1

Ou separando os seletores no transform

.elemento {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
-1

Usando a propriedade display com o valor flex, você terá mais recursos para alinhar os elementos na tela. Utilize flex-direction: row;, justify-content: center; e align-items: center; para manter todos elementos centralizados e um @media para tornar o layout responsivo de acordo com o seu guide.

Segue um exemplo da utilização do valor flex:

/*Main Menu CSS*/
* {
  margin: 0;
  padding: 0;
}
.header-area {
  background: #4dc3cf;
}
.header-area .logotipo {
  display: inline-block;
}
.main-menu ul {
  text-align: center;
}
.main-menu ul li {
  list-style: none;
  display: inline-block;
  position: relative;
}
.main-menu ul li a {
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  padding: 30px 20px;
  margin: 0px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.4s;
}
.main-menu ul li a:hover {
  color: #000;
}

/*Dropdown Menu CSS*/
.main-menu ul li ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 200px;
  z-index: 999;
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  background: #4dc3cf;
  box-shadow: 0 2px 8px -2px rgb(37, 39, 38);
}
.main-menu ul li:hover ul {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}
.main-menu ul li ul li a {
  padding: 14px 18px;
}

.main-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
align-items: center;
}

@media (max-width: 650px) {
  .main-menu {
flex-direction: column;
  }
}
  <header class="header-area">

<div class="main-menu">
  <nav>
    <ul>
      <li><a href="#" title="">Home</a></li>
      <li><a href="#" title="">About Us</a></li>
      <li><a href="#" title="">Services</a>
        <ul>
          <li><a href="#">Service One</a></li>
          <li><a href="#">Service Two</a></li>
          <li><a href="#">Service Three</a></li>
          <li><a href="#">Service Four</a></li>
          <li><a href="#">Service Five</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div class="logotipo">
    <a href="#"><img src="https://i.imgur.com/eH60XtT.png" alt="logo alt"></a>
  </div>
  <nav>
    <ul>
      <li><a href="#" title="">Portfolio</a></li>
      <li><a href="#" title="">Blog</a></li>
      <li><a href="#" title="">Contact Us</a></li>
    </ul>
  </nav>
</div>
  </header>

14
  • 1
    Pra que Flex para algo tão simples? Um simples div com o IMG sendo um elemento nativamente INLINE, bastaria que o DIV, remover o position:absolute (do código autor) pai usa-se text-align: center;, não me admira que os sites de hoje cada vezes ficam mais pesados e visualmente ainda simples, é porque as pessoas acreditam mesmo que novas tecnologias vem para substituir o que funciona tão bem, quando na verdade FLEX hora e lugar pra usar de forma proveitosa, você pode escolher ter um tanque de guerra para ir na padaria buscar 6 pães, mas não quer dizer q deva incentivar os outros a isto.
    – Syzoth
    Commented 6/04/2020 às 4:39
  • @GuilhermeNascimentom concordo :), auxilie o nosso amigo desenvolvedor com a sua solução mais simples. E pode negativar caso achou minha solução muito complexa. Commented 6/04/2020 às 4:44
  • Entendi, sempre me recomendaram flexbox de forma geral, sou iniciante, vi o codigo no meu não funcionou acho que porque uso jquery e meanmenu, poderia baixar o codigo completo e dar uma olhada? drive.google.com/file/d/1TlsfuQD6WuENe5H2Q8JaWp_bMDWUjqqI/view Iria me ser muito util, se quiser chama no chat.
    – user181173
    Commented 6/04/2020 às 4:48
  • 1
    @KleberOliveira seu ultimo comentário resumiu a melhor possivel solução, refazer. O autor quer remendar e isto é complicado, o melhor seria ele estudar o básico antes de pular pro avançado, na verdade a pergunta deveria estar fechada, pq nem chega a ser um problema bem definido. Os votos de fechamento não são do mal ;)
    – Syzoth
    Commented 6/04/2020 às 4:56
  • 1
    @KleberOliveira vou fechar o post, boa noite.
    – user181173
    Commented 6/04/2020 às 5:04

Você deve fazer log-in para responder a esta pergunta.