CODEWITHSUNDEEP
htmlcss
Richard Bidins
Richard Bidins

Reputation: 31

How to center <span> inside <p>

Hey I'm trying to have a text justified but on the top of the text I want another text but on the center, inside a span tag.. Code down below

html:

<p><span>Hello world,</span>Here is my long text, about 100 lines</p> <!-- This must be justified-->

css:

p {
    text-align: justify;
}

span {
    text-align: center;
}

Upvotes: 3

Views: 3050

Answers (3)

vladdobra
vladdobra

Reputation: 144

Just for funsies, you could also use flex;

.container {
   display: flex;
   flex-direction: column;
   width: 400px;
}  

.container p {
  width: 400px;
}  
  
.container span {
  align-self: center;
}  
<div class="container">
  <span>Lorem ipsum dolor sit amen, neato</span>
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida ac ex vel tempor. Integer eget rutrum lorem. In accumsan rutrum mauris quis porttitor. In hac habitasse platea dictumst. Fusce vulputate feugiat viverra. Sed ac commodo purus, sed sollicitudin ex. Cras a mattis risus, vel accumsan augue. Maecenas odio erat, auctor maximus lorem nec, euismod auctor sem. Etiam ac vestibulum justo, eget vestibulum tellus.


  </p>  
</div>

You probably should never use this solution, because you could probably just use the text-align property, but flex is pretty sweet at doing stuff like this. Something to keep in mind is that align-self pertains to the nearest flex, not the p element, since it does not have display: flex;.

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

You'll need to set the span element to display: block; in order for the text-align: center; rule you have declared on this element to take the effect you expect.

span {
  display: block;
  text-align: center;
}

p {
  text-align: justify;
}
<p><span>Hello world,</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

It would be better to change the span to a p, as it is already a block element, then you can target respective p tags separately and apply the needed text-align rule accordingly.

Upvotes: 6

Paulie_D
Paulie_D

Reputation: 115066

This really sounds like something you should be using a heading for rather than a span but flexbox can do that.

p {
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey
}
span {
  text-align: center;
  width: 100%;
}
<p><span>Hello world,</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde cum, quis vero consequuntur temporibus nisi a voluptatum repudiandae sequi aliquid adipisci eum, quae libero autem ducimus commodi ab officiis nesciunt tempore!
  Dicta quos, assumenda modi totam rem accusantium odio fuga consequatur sunt minus asperiores, corrupti corporis labore reiciendis animi.</p>

More semantically.

* {
  margin: 0;
}
div {
  text-align: justify;
  flex-wrap: wrap;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey
}
h4 {
  text-align: center;
  width: 100%;
  font-weight: normal;
}
<div>
  <h4>Hello world</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde cum, quis vero consequuntur temporibus nisi a voluptatum repudiandae sequi aliquid adipisci eum, quae libero autem ducimus commodi ab officiis nesciunt tempore! Dicta quos, assumenda
    modi totam rem accusantium odio fuga consequatur sunt minus asperiores, corrupti corporis labore reiciendis animi.</p>
</div>

Upvotes: 2

Related Questions