CODEWITHSUNDEEP
htmlcssalignment
Badal Singh
Badal Singh

Reputation: 479

Text Align Property is not working for Span Tag

There is section inside which i have defined text-align as left for a line but its not taking effect for some reason 

<section id="topic1">
This is a centered Heading for Topic 1<br>
<span class="text">This is a left aligned line</span>
</section>

section {
  text-align: center;
  height: auto;
  width: 100%;
}

.text {
  display: inline-block;
  text-align: left;
}

I tried display: block for text span tag in above code and text got aligned to left but i am looking for a alternative way to do this

Reason for finding alternative way - Even tho block display is aligning text to left , keeping display as block for all the span tags within my webpage increases the space between each span tag for some reason

Practical example below

<span class="text">This is line 1</span><br>
<span class="text">This is line 2</span>

.text {
  display: block;
}

If you check output of above code there would be space between line 1 and 2 because of display block . I am okay with using display : block to make text align work for span tag

But then this unnecessary space created by block display bothers me

Isn't there any way to avoid that unnecessary space ( seen between line 1 and 2 ) created while using block display

Upvotes: 2

Views: 2546

Answers (4)

Johannes
Johannes

Reputation: 67799

An inline-blockelement is only as wide as its contents, in your case NOT the full width of the container.

In their container inline-blocks are aligned according to the text-align setting of the parent element (= the container, in your case #topic1), thats why they are called INLINE-blocks.

So if you want it left-aligned, you have to change the alignment of section to left. And wrap your to be centered text in a heading element (like <h1>...</h1>, wich is a block element having 100% width by default) to which you apply text-align: center. And BTW, that would also improve the semantical quality of the HTML - headers should be wrapped in header tags.

About "unneccessary vertical space between lines": That the default margin-top and margin-bottom of these elements - you can reduce those by defining them in the CSS for the according elements)

Upvotes: 2

9841pratik
9841pratik

Reputation: 195

Try adding float: left instead of text-align:left. As span element or inline-block element take only fit width. float will help align the item with respect to parent.

https://codepen.io/pratik-sangami/pen/dybKMVz

Upvotes: 0

disinfor
disinfor

Reputation: 11558

You can do something like this using margin. This will allow you to adjust the spacing between the blocks. Also, you can remove the br tags.

section {
  text-align: center;
  height: auto;
  width: 100%;
}

.text {
  display: block;
  text-align: left;
  margin: 10px 0;
  /* CHANGE THIS VALUE */
}
<section id="topic1">
  This is a centered Heading for Topic 1
  <span class="text">This is line 1</span>
  <span class="text">This is line 2</span>
</section>

Upvotes: 1

Rounin
Rounin

Reputation: 29511

You have a space after the period.

To select class="text", use:

.text

not

. text

Upvotes: 0

Related Questions