CODEWITHSUNDEEP
htmlcss
Benard Manuh
Benard Manuh

Reputation: 107

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: enter image description here

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. enter image description here

Upvotes: 0

Views: 1303

Answers (4)

Armen Michaeli
Armen Michaeli

Reputation: 9140

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, messing up your layout. To reiterate: there is nothing wrong with your paragraph element in and out of itself, although I must mention it does not semantically fit in the context it is in -- as a heading, apparently.

Upvotes: 3

Tanasos
Tanasos

Reputation: 4098

.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>

Upvotes: 0

caxinaswin
caxinaswin

Reputation: 71

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
}

Upvotes: -1

Gufran Hasan
Gufran Hasan

Reputation: 9373

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>

Upvotes: 0

Related Questions