How do i make a paragraph wider?
I want to make my paragraph wider and also for it to remain in the centre of the page.
Whenever i change the width of my paragraph it ends up going to the left side of the page like this:
This is a snippet of my HTML and CSS file:
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
width: 50px;<p class="topheader">The best Macbook at your disposal!</p>I want my paragraph to stay in the centre like this but for the paragraph to be wider.
html css
asked Nov 12 at 15:43
Benard Manuh
565
add a comment |
I want to make my paragraph wider and also for it to remain in the centre of the page.
Whenever i change the width of my paragraph it ends up going to the left side of the page like this:
This is a snippet of my HTML and CSS file:
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
width: 50px;<p class="topheader">The best Macbook at your disposal!</p>I want my paragraph to stay in the centre like this but for the paragraph to be wider.
html css
asked Nov 12 at 15:43
Benard Manuh
565
simply remove width?
– Temani Afif
Nov 12 at 15:44
But i still want the left and right side of the text to be wider.
– Benard Manuh
Nov 12 at 15:46
margin: 0 auto; or in your casemargin: 80px auto 20px auto;
– Simsteve7
Nov 12 at 15:46
removing width from your code will give the result shown on your screenshot
– Temani Afif
Nov 12 at 15:47
yes but i want my text to be wider than it shows in the second picture, like how 'font-size' makes the text bigger but i just want it to be more wide. Sorry I think i did not explain it properly.
– Benard Manuh
Nov 12 at 15:59
add a comment |
I want to make my paragraph wider and also for it to remain in the centre of the page.
Whenever i change the width of my paragraph it ends up going to the left side of the page like this:
This is a snippet of my HTML and CSS file:
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
width: 50px;<p class="topheader">The best Macbook at your disposal!</p>I want my paragraph to stay in the centre like this but for the paragraph to be wider.
html css
asked Nov 12 at 15:43
Benard Manuh
565
I want to make my paragraph wider and also for it to remain in the centre of the page.
Whenever i change the width of my paragraph it ends up going to the left side of the page like this:
This is a snippet of my HTML and CSS file:
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
width: 50px;<p class="topheader">The best Macbook at your disposal!</p>I want my paragraph to stay in the centre like this but for the paragraph to be wider.
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
width: 50px;<p class="topheader">The best Macbook at your disposal!</p>.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
width: 50px;<p class="topheader">The best Macbook at your disposal!</p>html css
html css
asked Nov 12 at 15:43
Benard Manuh
565
asked Nov 12 at 15:43
Benard Manuh
565
asked Nov 12 at 15:43
Benard Manuh
565
asked Nov 12 at 15:43
Benard Manuh
565
asked Nov 12 at 15:43
Benard Manuh
565
565
simply remove width?
– Temani Afif
Nov 12 at 15:44
But i still want the left and right side of the text to be wider.
– Benard Manuh
Nov 12 at 15:46
margin: 0 auto; or in your casemargin: 80px auto 20px auto;
– Simsteve7
Nov 12 at 15:46
removing width from your code will give the result shown on your screenshot
– Temani Afif
Nov 12 at 15:47
yes but i want my text to be wider than it shows in the second picture, like how 'font-size' makes the text bigger but i just want it to be more wide. Sorry I think i did not explain it properly.
– Benard Manuh
Nov 12 at 15:59
add a comment |
simply remove width?
– Temani Afif
Nov 12 at 15:44
But i still want the left and right side of the text to be wider.
– Benard Manuh
Nov 12 at 15:46
margin: 0 auto; or in your casemargin: 80px auto 20px auto;
– Simsteve7
Nov 12 at 15:46
removing width from your code will give the result shown on your screenshot
– Temani Afif
Nov 12 at 15:47
yes but i want my text to be wider than it shows in the second picture, like how 'font-size' makes the text bigger but i just want it to be more wide. Sorry I think i did not explain it properly.
– Benard Manuh
Nov 12 at 15:59
simply remove width?
– Temani Afif
Nov 12 at 15:44
simply remove width?
– Temani Afif
Nov 12 at 15:44
But i still want the left and right side of the text to be wider.
– Benard Manuh
Nov 12 at 15:46
But i still want the left and right side of the text to be wider.
– Benard Manuh
Nov 12 at 15:46
margin: 0 auto; or in your case
margin: 80px auto 20px auto;– Simsteve7
Nov 12 at 15:46
margin: 0 auto; or in your case
margin: 80px auto 20px auto;– Simsteve7
Nov 12 at 15:46
removing width from your code will give the result shown on your screenshot
– Temani Afif
Nov 12 at 15:47
removing width from your code will give the result shown on your screenshot
– Temani Afif
Nov 12 at 15:47
yes but i want my text to be wider than it shows in the second picture, like how 'font-size' makes the text bigger but i just want it to be more wide. Sorry I think i did not explain it properly.
– Benard Manuh
Nov 12 at 15:59
yes but i want my text to be wider than it shows in the second picture, like how 'font-size' makes the text bigger but i just want it to be more wide. Sorry I think i did not explain it properly.
– Benard Manuh
Nov 12 at 15:59
add a comment |
4 Answers
4
active
oldest
votes
There is nothing wrong with your p.topheader except the silly width: 50px which is completely unnecessary. A paragraph occupies the width of containing block by default, you just need to center its text:
p.topheader {
text-align: center;
}
You most likely have various rules on the containing block and its containing blocks in turn, which mess up your layout. There is nothing wrong with your paragraph element, although it does not semantically fit in the context it is in -- as a heading, apparently.
answered Nov 12 at 15:52
amn
3,91753062
add a comment |
make width 100% from 50px. It will cover paragraph default width.
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:45
Gufran Hasan
3,42641326
add a comment |
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:53
snkv
1,9692829
add a comment |
You can do it using flex.
Put a wrapper around the image and the paragraph like:
<div class="wrapper">
<p>my paragraph</p>
<img />
</div>
in the CSS use:
.wrapper {
display: flex;
align-items: center;
justify-content: center
}
answered Nov 12 at 15:48
caxinaswin
2617
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
});
}
});
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%2f53265520%2fhow-do-i-make-a-paragraph-wider%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is nothing wrong with your p.topheader except the silly width: 50px which is completely unnecessary. A paragraph occupies the width of containing block by default, you just need to center its text:
p.topheader {
text-align: center;
}
You most likely have various rules on the containing block and its containing blocks in turn, which mess up your layout. There is nothing wrong with your paragraph element, although it does not semantically fit in the context it is in -- as a heading, apparently.
answered Nov 12 at 15:52
amn
3,91753062
add a comment |
There is nothing wrong with your p.topheader except the silly width: 50px which is completely unnecessary. A paragraph occupies the width of containing block by default, you just need to center its text:
p.topheader {
text-align: center;
}
You most likely have various rules on the containing block and its containing blocks in turn, which mess up your layout. There is nothing wrong with your paragraph element, although it does not semantically fit in the context it is in -- as a heading, apparently.
answered Nov 12 at 15:52
amn
3,91753062
add a comment |
There is nothing wrong with your p.topheader except the silly width: 50px which is completely unnecessary. A paragraph occupies the width of containing block by default, you just need to center its text:
p.topheader {
text-align: center;
}
You most likely have various rules on the containing block and its containing blocks in turn, which mess up your layout. There is nothing wrong with your paragraph element, although it does not semantically fit in the context it is in -- as a heading, apparently.
answered Nov 12 at 15:52
amn
3,91753062
There is nothing wrong with your p.topheader except the silly width: 50px which is completely unnecessary. A paragraph occupies the width of containing block by default, you just need to center its text:
p.topheader {
text-align: center;
}
You most likely have various rules on the containing block and its containing blocks in turn, which mess up your layout. There is nothing wrong with your paragraph element, although it does not semantically fit in the context it is in -- as a heading, apparently.
answered Nov 12 at 15:52
amn
3,91753062
edited Nov 12 at 16:21
answered Nov 12 at 15:52
amn
3,91753062
answered Nov 12 at 15:52
amn
3,91753062
answered Nov 12 at 15:52
amn
3,91753062
3,91753062
add a comment |
add a comment |
make width 100% from 50px. It will cover paragraph default width.
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:45
Gufran Hasan
3,42641326
add a comment |
make width 100% from 50px. It will cover paragraph default width.
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:45
Gufran Hasan
3,42641326
add a comment |
make width 100% from 50px. It will cover paragraph default width.
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:45
Gufran Hasan
3,42641326
make width 100% from 50px. It will cover paragraph default width.
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.9em;
margin-top: 20px;
text-transform: uppercase;
width: 100%;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:45
Gufran Hasan
3,42641326
answered Nov 12 at 15:45
Gufran Hasan
3,42641326
answered Nov 12 at 15:45
Gufran Hasan
3,42641326
answered Nov 12 at 15:45
Gufran Hasan
3,42641326
3,42641326
add a comment |
add a comment |
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:53
snkv
1,9692829
add a comment |
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:53
snkv
1,9692829
add a comment |
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:53
snkv
1,9692829
.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>.topheader {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 2em;
margin-top: 80px;
text-transform: uppercase;
text-align: center;<p class="topheader">The best Macbook at your disposal!</p>answered Nov 12 at 15:53
snkv
1,9692829
answered Nov 12 at 15:53
snkv
1,9692829
answered Nov 12 at 15:53
snkv
1,9692829
answered Nov 12 at 15:53
snkv
1,9692829
1,9692829
add a comment |
add a comment |
You can do it using flex.
Put a wrapper around the image and the paragraph like:
<div class="wrapper">
<p>my paragraph</p>
<img />
</div>
in the CSS use:
.wrapper {
display: flex;
align-items: center;
justify-content: center
}
answered Nov 12 at 15:48
caxinaswin
2617
add a comment |
You can do it using flex.
Put a wrapper around the image and the paragraph like:
<div class="wrapper">
<p>my paragraph</p>
<img />
</div>
in the CSS use:
.wrapper {
display: flex;
align-items: center;
justify-content: center
}
answered Nov 12 at 15:48
caxinaswin
2617
add a comment |
You can do it using flex.
Put a wrapper around the image and the paragraph like:
<div class="wrapper">
<p>my paragraph</p>
<img />
</div>
in the CSS use:
.wrapper {
display: flex;
align-items: center;
justify-content: center
}
answered Nov 12 at 15:48
caxinaswin
2617
You can do it using flex.
Put a wrapper around the image and the paragraph like:
<div class="wrapper">
<p>my paragraph</p>
<img />
</div>
in the CSS use:
.wrapper {
display: flex;
align-items: center;
justify-content: center
}
answered Nov 12 at 15:48
caxinaswin
2617
answered Nov 12 at 15:48
caxinaswin
2617
answered Nov 12 at 15:48
caxinaswin
2617
answered Nov 12 at 15:48
caxinaswin
2617
2617
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53265520%2fhow-do-i-make-a-paragraph-wider%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
simply remove width?
– Temani Afif
Nov 12 at 15:44
But i still want the left and right side of the text to be wider.
– Benard Manuh
Nov 12 at 15:46
margin: 0 auto; or in your case
margin: 80px auto 20px auto;– Simsteve7
Nov 12 at 15:46
removing width from your code will give the result shown on your screenshot
– Temani Afif
Nov 12 at 15:47
yes but i want my text to be wider than it shows in the second picture, like how 'font-size' makes the text bigger but i just want it to be more wide. Sorry I think i did not explain it properly.
– Benard Manuh
Nov 12 at 15:59