×
Ir ao conteúdo
  • Cadastre-se

CSS Dificuldades em colocar texto super e alinhar imagem


Impts
Ir à solução Resolvido por thefill,

Posts recomendados

 

 

Primeira dúvida, estou tentando colocar o texto "bronze" como super, igual aqueles TM de empresa, na parte superior direita de uma palavra, porém não está funcionando.

 

<p class="backservice"><a href="#" class="link-service"></a></p>
        <p><h1>Serviço</h1><span class="variant-bronze">Bronze</span></p>
        <p><h2>O melhor de todos.</h2></p>
        <p><a href="link-saibaservice">Saiba mais</a></p>

 

.variant-bronze {font-size: 12px; vertical-align: super;}
.backservice {background-color:gold;}
.link-service {
    background: url('alm.png');
    display: block;
    background-position: center;
   /* background-color: #E34140;*/
    height: 250px;
   /* align-items: center;
    align-items: justify;*/
    background-repeat: no-repeat;
    background-size: 200px;
  
    

 

 

A outra dúvida, é como colocar a imagem alinhada para direita > e o texto no meio para esquerda <, so que o texto com uma certa distancia da imagem?

 

<p class="img"><img src="foto.jpg">
        <h1>Titulo da foto</h1>
        <h2>Descrição da foto.</h2>
        <a href="link-sif">Clique para baixar</a></p>
.img {text-align: right;}

 

Link para o comentário
Compartilhar em outros sites

Bom dia Sr. @Impts

 

Em relação a sua primeira pergunta eu devo dizer que não entendi exatamente o que você quis dizer, você poderia adicionar imagens sobre isso?

 

Já em relação a sua segunda pergunta eu tentei fazer aqui, seria dessa forma?

op2.thumb.png.fa86d5f0f20097b24120090e6dd6e3d4.png

 

Se for assim, eu posso disponibiliza o código depois.

Link para o comentário
Compartilhar em outros sites

  • Solução

Certo!

O primeiro eu fiz assim:

 

---HTML---

<div class="imgBox">
      <div>
        <h1>Titulo da foto</h1>
        <h2>Descrição da foto.</h2>
        <a href="link-sif">Clique para baixar</a>
      </div>
      <img
        src="https://images.unsplash.com/photo-1638026902706-5fce0ca77f8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
      />
</div>

 

---CSS---

.imgBox {
  padding: 20px 50px;
  background-color: #fff;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.imgBox h1 {
  font-size: 2.3em;
}
.imgBox h2 {
  font-size: 1.6em;
}
.imgBox img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

 

E o segundo eu consegui fazer assim:

 

---HTML---

<div>
      <h1>Serviço</h1>
      <span>Bronze</span>
</div>

 

---CSS---

div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 8em;
}
span {
  font-size: 1.6em;
  top: 0;
  right: 0;
}

 

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Curso de Hacker Ético

LANÇAMENTO!

CLIQUE AQUI E CONFIRA!

* Este curso não é ministrado pela equipe do Clube do Hardware.