Question :
I just do not understand why the third line does not align with the rest of the text.
link
HTML:
<div id="contact"><h1>CONTACTO</h1>
<p>+(351) 968 888 888 +(351) 218 888 888<br><br>
<a href="mailto:uas@tet.com" target="_blank">linguas@tetraling.com</a><br><br>
Avenida da República, Torre Soleil
</p></div>
CSS:
#contact {
width: 50%;
float: left;
background-color: #449DCC;
height: 350px;
}
#contact h1 {
color:#fff;
font-size:18
}
#contact p {
float: right;
margin-right: 25px;
font-size: 15px;
color:#fff;
}
#contact a {
float: right;
font-size: 15px;
color:#fff;
text-decoration: underline;
}
Answer :
You can use the text-align
property. Example , which simply aligns all text in the position you specify (right, left, or center)
#contact p {
float: right;
margin-right: 25px;
text-align: right;
font-size: 15px;
color:#fff;
}
I think what you want is this result:
<div id="contact"><h1>CONTACTO</h1>
<p>+(351) 967 181 237 +(351) 214 569 018<br><br></p>
<a href="mailto:linguas@tetraling.com" target="_blank">linguas@tetraling.com</a><br><br>
<p>Avenida da República, Torre Soleil</p>
</div>
.
#contact a {
float: right;
font-size: 15px;
margin-right: 25px;
color:#fff;
text-decoration: underline;
}
What did I do?
I closed <p>
before <a>
and reopened at the end of </a>
; I put margin-right: 25px;
in CSS #contact a
to be fine aligned.
Put a <p>texto</p>
for each line
<div id="contact">
<h1>CONTACTO</h1>
<p>(351) 967 181 237 (351) 214 569 018</p>
<p><a href="mailto:linguas@tetraling.com" target="_blank">linguas@tetraling.com</a></p>
<p>Avenida da República, Torre Soleil</p>
</div>
Link: link