PeaceAnd Cube PeaceAnd Cube - 3 months ago 6
CSS Question

text-align not working on link

I want the link to be on the left of "info" div, but I can't figure out a way to do it,

text-align: left;
is not working. I think that maybe the CSS is interfering with the text-align property.



@font-face {
font-family: myFirstFont;
src: url(Minecraftia.ttf);
}


a {
font-family: myFirstFont;
text-decoration: none;
font-size: 13px;
}
div#comment {

border-radius: 4px;
margin: 0 auto;
padding: 0 3px;
width: 600px;
}
input[type=submit] {
background-color: white;
font-size: large;
padding: 14px 20px;
margin: 8px 0;
border: 3px solid green;
border-radius: 10px;
cursor: pointer;
font-family: myFirstFont;
text-align: center;
}
input[type=text], input[type=mail], select {
width: 600px;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
background-color: #F8F8F8;
font-family: myFirstFont;
}
textarea {
width: 600px;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
background-color: #F8F8F8;
font-family: myFirstFont;
resize: none;
}
p
{
font-family: myFirstFont;
font-size: 13px;
margin: 0 auto;

}
div#info {
border-radius: 4px;
margin: 0 auto;
padding: 0 3px;
width: 600px;
border-bottom: 1px solid green;
}
form {
text-align: center;
}

<div id="info"><p>Pringui - 25 août 2016 - <a href="Modifier.php">Modifier</a></p></div><div id="comment"> <p>Hello World.</p></div>




Answer

You can use floating to move the link before the other text:

a {
  float: left;
}

@font-face {
  font-family: myFirstFont;
  src: url(Minecraftia.ttf);
}
a {
  font-family: myFirstFont;
  text-decoration: none;
  font-size: 13px;
  float: left;
}
a::after {
  content: ' - ';
  white-space: pre;
}
div#comment {
  border-radius: 4px;
  margin: 0 auto;
  padding: 0 3px;
  width: 600px;
}
input[type=submit] {
  background-color: white;
  font-size: large;
  padding: 14px 20px;
  margin: 8px 0;
  border: 3px solid green;
  border-radius: 10px;
  cursor: pointer;
  font-family: myFirstFont;
  text-align: center;
}
input[type=text],
input[type=mail],
select {
  width: 600px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #F8F8F8;
  font-family: myFirstFont;
}
textarea {
  width: 600px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #F8F8F8;
  font-family: myFirstFont;
  resize: none;
}
p {
  font-family: myFirstFont;
  font-size: 13px;
  margin: 0 auto;
}
div#info {
  border-radius: 4px;
  margin: 0 auto;
  padding: 0 3px;
  width: 600px;
  border-bottom: 1px solid green;
}
form {
  text-align: center;
}
<div id="info">
  <p>Pringui - 25 août 2016 <a href="Modifier.php">Modifier</a>
  </p>
</div>
<div id="comment">
  <p>Hello World.</p>
</div>