Html paragraph how to align text at the center and start all the text lines at the same place or position?
0
<p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>I was trying to write a paragraph in HTML,i need to align text at the center,the text is aligned but the problem is the text is not starting at same place or position.
Please check the picture to understand me clearly,
Thank You.
my Html
check this picture
css html5
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
add a comment |
0
<p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>I was trying to write a paragraph in HTML,i need to align text at the center,the text is aligned but the problem is the text is not starting at same place or position.
Please check the picture to understand me clearly,
Thank You.
my Html
check this picture
css html5
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
add a comment |
0
0
0
<p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>I was trying to write a paragraph in HTML,i need to align text at the center,the text is aligned but the problem is the text is not starting at same place or position.
Please check the picture to understand me clearly,
Thank You.
my Html
check this picture
css html5
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
<p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>I was trying to write a paragraph in HTML,i need to align text at the center,the text is aligned but the problem is the text is not starting at same place or position.
Please check the picture to understand me clearly,
Thank You.
my Html
check this picture
<p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p> <p style="text-align: center;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>css html5
css html5
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
edited Nov 26 '18 at 21:30
Jimale Abdi
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
asked Nov 26 '18 at 21:19
Jimale AbdiJimale Abdi
359
359
add a comment |
add a comment |
6 Answers
6
active
oldest
votes
2
If you are only able to style the <p> element, then do the following:
Add display: flex to convert the p into a flex container, and text-align: left to keep the text justified on the left.
Set the direction of the container to column so that it will keep the breaks, and then align-items: center.
align-items will align the elements on the cross-axis, which in this case is the horizontal axis.
<p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
@JimaleAbdi You don't need to change thepinto adiv. This may work, but Itay Gal's answer below is the simplest and most straight-forward.
– Scott Marcus
Nov 27 '18 at 0:05
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
add a comment |
2
This is the shortest way and it's simple. You set a fixed width and giving it auto margin so it will be centered.
.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>If you layout is more complex you might want to use flex. For example:
.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
add a comment |
1
If you put the paragraph inside a div (with a fixed width) and center the div on the page then you can use text-align to style the paragraph itself (inside the div). I think you want text-align: left; for the paragraph text itself.
Here is the CSS for the div wrapper.
CSS
.text-wrapper{
width: 300px;
margin: 0px auto;
}
HTML
<body>
<div class="text-wrapper">
<p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>
</div>
</body>
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
1
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
add a comment |
1
p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>answered Nov 26 '18 at 21:51
samansaman
111
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
add a comment |
0
You could do something like this:
<div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>text-align: center-right is not a valid attribute. We can however wrap a div around your paragraph and move that into the center of the page with margin:0 auto. We also have to give this div a fixed width.
answered Nov 26 '18 at 21:34
yinkenyinken
24328
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
add a comment |
-1
You don't need the br. define a width instead of.
.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Removetext-align:justify. OP is showing/asking for left justification, just with an left indent.
– Scott Marcus
Nov 27 '18 at 0:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53489229%2fhtml-paragraph-how-to-align-text-at-the-center-and-start-all-the-text-lines-at-t%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
If you are only able to style the <p> element, then do the following:
Add display: flex to convert the p into a flex container, and text-align: left to keep the text justified on the left.
Set the direction of the container to column so that it will keep the breaks, and then align-items: center.
align-items will align the elements on the cross-axis, which in this case is the horizontal axis.
<p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
@JimaleAbdi You don't need to change thepinto adiv. This may work, but Itay Gal's answer below is the simplest and most straight-forward.
– Scott Marcus
Nov 27 '18 at 0:05
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
add a comment |
2
If you are only able to style the <p> element, then do the following:
Add display: flex to convert the p into a flex container, and text-align: left to keep the text justified on the left.
Set the direction of the container to column so that it will keep the breaks, and then align-items: center.
align-items will align the elements on the cross-axis, which in this case is the horizontal axis.
<p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
@JimaleAbdi You don't need to change thepinto adiv. This may work, but Itay Gal's answer below is the simplest and most straight-forward.
– Scott Marcus
Nov 27 '18 at 0:05
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
add a comment |
2
2
2
If you are only able to style the <p> element, then do the following:
Add display: flex to convert the p into a flex container, and text-align: left to keep the text justified on the left.
Set the direction of the container to column so that it will keep the breaks, and then align-items: center.
align-items will align the elements on the cross-axis, which in this case is the horizontal axis.
<p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
If you are only able to style the <p> element, then do the following:
Add display: flex to convert the p into a flex container, and text-align: left to keep the text justified on the left.
Set the direction of the container to column so that it will keep the breaks, and then align-items: center.
align-items will align the elements on the cross-axis, which in this case is the horizontal axis.
<p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p> <p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p> <p style="text-align: left; display:flex; flex-direction: column; align-items: center">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
answered Nov 26 '18 at 21:33
wlhwlh
1,8601823
1,8601823
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
@JimaleAbdi You don't need to change thepinto adiv. This may work, but Itay Gal's answer below is the simplest and most straight-forward.
– Scott Marcus
Nov 27 '18 at 0:05
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
add a comment |
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
@JimaleAbdi You don't need to change thepinto adiv. This may work, but Itay Gal's answer below is the simplest and most straight-forward.
– Scott Marcus
Nov 27 '18 at 0:05
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Thank you this is the best because i have complex page and its hard for to change all the P tags into div,
– Jimale Abdi
Nov 26 '18 at 21:48
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
Just keep in mind that in many cases, such as this one, there is more than one way to approach it.
– wlh
Nov 26 '18 at 21:54
@JimaleAbdi You don't need to change the
p into a div. This may work, but Itay Gal's answer below is the simplest and most straight-forward.– Scott Marcus
Nov 27 '18 at 0:05
@JimaleAbdi You don't need to change the
p into a div. This may work, but Itay Gal's answer below is the simplest and most straight-forward.– Scott Marcus
Nov 27 '18 at 0:05
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
@ScottMarcus Yes of course, Thank you
– Jimale Abdi
Nov 27 '18 at 19:17
add a comment |
2
This is the shortest way and it's simple. You set a fixed width and giving it auto margin so it will be centered.
.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>If you layout is more complex you might want to use flex. For example:
.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
add a comment |
2
This is the shortest way and it's simple. You set a fixed width and giving it auto margin so it will be centered.
.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>If you layout is more complex you might want to use flex. For example:
.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
add a comment |
2
2
2
This is the shortest way and it's simple. You set a fixed width and giving it auto margin so it will be centered.
.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>If you layout is more complex you might want to use flex. For example:
.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
This is the shortest way and it's simple. You set a fixed width and giving it auto margin so it will be centered.
.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>If you layout is more complex you might want to use flex. For example:
.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>.container {
width: 300px;
margin: 0 auto;
}<div class="container">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>.container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content{
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
}<div class="container">
<div class="content">
<p>
Lorem Ipsum is simply dummy text<br> Lorem Ipsum has been the industry's <br> when an unknown printer took a galley <br> It has survived not only five centuries,<br> remaining essentially unchanged. It was<br> of Letraset sheets containing Lorem Ipsum<br> publishing software like Aldus PageMaker.</p>
</div>
</div>answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
answered Nov 26 '18 at 21:31
Itay GalItay Gal
8,12052560
8,12052560
add a comment |
add a comment |
1
If you put the paragraph inside a div (with a fixed width) and center the div on the page then you can use text-align to style the paragraph itself (inside the div). I think you want text-align: left; for the paragraph text itself.
Here is the CSS for the div wrapper.
CSS
.text-wrapper{
width: 300px;
margin: 0px auto;
}
HTML
<body>
<div class="text-wrapper">
<p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>
</div>
</body>
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
1
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
add a comment |
1
If you put the paragraph inside a div (with a fixed width) and center the div on the page then you can use text-align to style the paragraph itself (inside the div). I think you want text-align: left; for the paragraph text itself.
Here is the CSS for the div wrapper.
CSS
.text-wrapper{
width: 300px;
margin: 0px auto;
}
HTML
<body>
<div class="text-wrapper">
<p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>
</div>
</body>
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
1
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
add a comment |
1
1
1
If you put the paragraph inside a div (with a fixed width) and center the div on the page then you can use text-align to style the paragraph itself (inside the div). I think you want text-align: left; for the paragraph text itself.
Here is the CSS for the div wrapper.
CSS
.text-wrapper{
width: 300px;
margin: 0px auto;
}
HTML
<body>
<div class="text-wrapper">
<p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>
</div>
</body>
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
If you put the paragraph inside a div (with a fixed width) and center the div on the page then you can use text-align to style the paragraph itself (inside the div). I think you want text-align: left; for the paragraph text itself.
Here is the CSS for the div wrapper.
CSS
.text-wrapper{
width: 300px;
margin: 0px auto;
}
HTML
<body>
<div class="text-wrapper">
<p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p>
</div>
</body>
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
answered Nov 26 '18 at 21:37
SarahSarah
1,112822
1,112822
1
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
add a comment |
1
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
1
1
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
Thank You .............
– Jimale Abdi
Nov 26 '18 at 22:02
add a comment |
1
p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>answered Nov 26 '18 at 21:51
samansaman
111
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
add a comment |
1
p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>answered Nov 26 '18 at 21:51
samansaman
111
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
add a comment |
1
1
1
p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>answered Nov 26 '18 at 21:51
samansaman
111
p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>p {
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
transform: translate(-50%, 0);
}<p>
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.
</p>answered Nov 26 '18 at 21:51
samansaman
111
answered Nov 26 '18 at 21:51
samansaman
111
answered Nov 26 '18 at 21:51
samansaman
111
answered Nov 26 '18 at 21:51
samansaman
111
111
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
add a comment |
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:01
add a comment |
0
You could do something like this:
<div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>text-align: center-right is not a valid attribute. We can however wrap a div around your paragraph and move that into the center of the page with margin:0 auto. We also have to give this div a fixed width.
answered Nov 26 '18 at 21:34
yinkenyinken
24328
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
add a comment |
0
You could do something like this:
<div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>text-align: center-right is not a valid attribute. We can however wrap a div around your paragraph and move that into the center of the page with margin:0 auto. We also have to give this div a fixed width.
answered Nov 26 '18 at 21:34
yinkenyinken
24328
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
add a comment |
0
0
0
You could do something like this:
<div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>text-align: center-right is not a valid attribute. We can however wrap a div around your paragraph and move that into the center of the page with margin:0 auto. We also have to give this div a fixed width.
answered Nov 26 '18 at 21:34
yinkenyinken
24328
You could do something like this:
<div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>text-align: center-right is not a valid attribute. We can however wrap a div around your paragraph and move that into the center of the page with margin:0 auto. We also have to give this div a fixed width.
<div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div> <div style="margin:0 auto;width:50vw"><p style="text-align: left;">
Lorem Ipsum is simply dummy text<br>
Lorem Ipsum has been the industry's <br>
when an unknown printer took a galley <br>
It has survived not only five centuries,<br>
remaining essentially unchanged. It was<br>
of Letraset sheets containing Lorem Ipsum<br>
publishing software like Aldus PageMaker.</p></div>answered Nov 26 '18 at 21:34
yinkenyinken
24328
answered Nov 26 '18 at 21:34
yinkenyinken
24328
answered Nov 26 '18 at 21:34
yinkenyinken
24328
answered Nov 26 '18 at 21:34
yinkenyinken
24328
24328
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
add a comment |
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
Thank You, it works but if i resize the browser also the text is resized and that is another problem because i'm used mobiles
– Jimale Abdi
Nov 26 '18 at 21:42
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
yes, that is due to the "width:50vw". You are actually better off using Itay's more complex solution, but change the .content style to use flex-shrink: 1; (instead of flex-shrink:0)
– yinken
Nov 26 '18 at 21:46
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
@wlh solution is the best way,Thank you again for your effort
– Jimale Abdi
Nov 26 '18 at 21:54
add a comment |
-1
You don't need the br. define a width instead of.
.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Removetext-align:justify. OP is showing/asking for left justification, just with an left indent.
– Scott Marcus
Nov 27 '18 at 0:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
add a comment |
-1
You don't need the br. define a width instead of.
.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Removetext-align:justify. OP is showing/asking for left justification, just with an left indent.
– Scott Marcus
Nov 27 '18 at 0:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
add a comment |
-1
-1
-1
You don't need the br. define a width instead of.
.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
You don't need the br. define a width instead of.
.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>.para {
width:300px;
margin:0 auto;
text-align:justify;
} <p class="para">
Lorem Ipsum is simply dummy text
Lorem Ipsum has been the industry's
when an unknown printer took a galley
It has survived not only five centuries,
remaining essentially unchanged. It was
of Letraset sheets containing Lorem Ipsum
publishing software like Aldus PageMaker.</p>answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
answered Nov 26 '18 at 21:37
Dogukan CavusDogukan Cavus
3,0912526
3,0912526
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Removetext-align:justify. OP is showing/asking for left justification, just with an left indent.
– Scott Marcus
Nov 27 '18 at 0:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
add a comment |
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Removetext-align:justify. OP is showing/asking for left justification, just with an left indent.
– Scott Marcus
Nov 27 '18 at 0:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Thank You....................
– Jimale Abdi
Nov 26 '18 at 22:04
Remove
text-align:justify. OP is showing/asking for left justification, just with an left indent.– Scott Marcus
Nov 27 '18 at 0:01
Remove
text-align:justify. OP is showing/asking for left justification, just with an left indent.– Scott Marcus
Nov 27 '18 at 0:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
Hey Jimale! Please accept the answer also :) I found my ancient answer :D Choose one answer that you believe is the best solution to your problem. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.
– Dogukan Cavus
Jan 12 at 23:01
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53489229%2fhtml-paragraph-how-to-align-text-at-the-center-and-start-all-the-text-lines-at-t%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
