I have got a bit lost.
I have centered a paragraph with
.block1912 {text-align:center;
display:block;
}
But I cannot get the line to split at the right point.
I have tried adding descriptionpara {display:block;} within spans but without success.
I also tried .block1912 .span {display:block} but again no luck
Where am I going wrong?
Thanks in Advance
I’m not sure what you’re trying to achieve. A p element is a block level element by default, so adding display:block to it won’t change anything.
Perhaps you can provide more code and/or a codepen with what you’re trying to achieve? And perhaps an image of what you’re trying to accomplish?
I would like the paragraph that is currently aligned left to be a block of text to be centred, but each line to align left.
I was also trying to use span /span instead of
for line braeks
Did you mean something like this?
Do you have a class called .span or is it just a span element (no dot before it).
e.g.
.block1912 span {display:block}
That is exactly what I want. Thanks very much.
I was given to understand that <br> was to be avoided and to use span and / span to force the line break.
Yes it all depends on context. 
Using breaks to make a line break when the text content is a series of paragraphs or indeed a single paragraph or text snippet would be incorrect semantically.
However where you have a line break within the same paragraph and the meaning carries over multiple lines (like a poem or address or styized paragraph like yours) then the break element is the correct choice.
Bear in mind that should the screen width be smaller than your line of text then the text will wrap at different points as well as at the break points.
Thanks for clarifying that.
I’ll bear that in mind.
Another way to have achieved this would have been to give explicit width and margin 0 auto to your class.
.block1912 {
width: 20em;/* am just guessing at the number, this one may not be right; you could also use % for more fluid resuts*/
margin:0 auto;
}
The reason I would suggest this, echoing what Paul said, is because BR tags are a permeant part of the markup and as such, the text will break at that specific word when the container changes size.
I have found that using the following CSS makes simple pages responsive - narrow screens only have a 6% margin at either side:
.
.mga {margin:0 auto;}
.w88 {width:88%; max-width:20em;}
Thanks for these additional comments.
The lines tend to be relatively small on all these type of pages and do fit on my mobile.
They are also family history related and at this point, very little is done on mobiles.
Actually, making a paragraph responsive is not difficult at all. In fact, it requires no CSS at all. It’s just a case of not adding any CSS that will break its naturally responsive behaviour.
To explain what you have been shown is that margin: auto will centre a block, while the text flow within the block is aligned by the text-align property.
Paul’s example uses the <br> to explicitly define line breaks, then the display: table with “shrink-wrap” the element width to the longest line length in the text.
Example from dresden_phoenix and John use width and max-width to constrain the block width, here the lines break naturally where they run out of space within the given width, no need for <br>.
Without any width constraint at all, the block will fill the full width and appear to be aligned as the text is.
This example may be something like you tried, with spans (displayed as blocks) explicitly defining line breaks, instead of br. Then display: table shrink-wraps the width, as in Paul’s example.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.