Ir para o conteúdo
Knitter

Texto alinhado ao fundo?

Mensagens Recomendadas

Knitter    101
Knitter

Ando aqui às voltas com o alinhamento de texto, como raio é que faço para colocar o texto alinhado ao fundo de uma div?

Tenho uma div para a qual desenho a margem de baixo, queria que o texto, que está dentro de uma tag h1, se alinhasse ao fundo da div para dar ideia que está em cima da linha e não ficar um espaço tão grande de diferença. Mas por mais tags que experimente o raio do texto não se mexe.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
rgcaldas    0
rgcaldas

Pelo que me lembro, e já não mexo em css à um tempo, não consegues, em css não existe o alinhamento vertical com nas tabelas.

Acho que a maneira mais facil é utilizares o padding. Não sei se estou a visualizar bem a cena, mas deve dar se fores aumentando o padding do topo, e/ou diminuindo o do fundo

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
djthyrax    11
djthyrax

Para fazer isso tens de ter duas divs e defines a propriedade na div interior

Exacto, e na inferior metes style="vertical-align:bottom" :P

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
naoliveira    0
naoliveira

Para fazer isso tens de ter duas divs e defines a propriedade na div interior

Exacto, e na inferior metes style="vertical-align:bottom" :)

o 'vertical-align' é só para elementos inline, tipo imagens ou spans, por isso neste caso não funciona.

Para fazeres isto podes usar o position:absolute

Experimenta este código, adapta para ti depois.

<?xml version="1.0" encoding="windows-1252"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Created on: 07-02-2007 -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>megaware - Soluções de Informática</title>

<style>

<style type="text/css">

div.a{}

div.b

{

position:relative;

height:200px;

background-color:cyan;

}

div.c

{

position:absolute;

bottom:0px;

left:0px;

background-color:yellow;

}

</style>

</style>

</head>

<body>

<div class="b">

Este texto fica no topo do div...

<div class="c">

Vê lá se este fica onde queres...

</div>

</div>

</body>

</html>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade