How to align one element on top of another with css?

Asked

Viewed 10,154 times

0

Hello.

I have this html code:

<p class="titulo">
    <a href="javascript:void(0);">(ABC)</a> Texto de Teste
</p>

He looks like this: (ABC) Test Text

How do I leave the (ABC) on top of the Test Text and centralized?

Thus:

    (ABC)
Texto de Teste

Note: I use twitter bootstrap.

html css twitter-bootstrap

3 answers

3


You can center the text within the paragraph and place the property display:block in the element a, example:

p.titulo{
  text-align:center;
}
p.titulo a{
  display:block;
}
<p class="titulo">
    <a href="javascript:void(0);">(ABC)</a> Texto de Teste
</p>

2

You can make an element occupy an entire line by itself modifying the style (via attribute or CSS). Just enter display: block. This is the standard for div's, but for links for example the behavior is display: inline, soon the display: block should be sufficient in your case.

The element will take up a whole row... You can even adjust the length with width and alignment with text-align, padding, margin etc..

1

It is necessary to add a div too.

<p class="titulo">
  <div id="umaDivQualquer">
    <a href="javascript:void(0);">(ABC)</br> Texto de Teste
  </div>
</a>

CSS:

#umaDivQualquer {
  width: 100px;
  height: 50px;
  text-align: center;
}

Young hug.

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.