Can't Solve This Small Thing! I Need Expert Help Please

Get Started
1

Sorry if this question might annoy some of you, but please bear in mind that I’m relatively new to web design and coding, I have just finished HTML and CSS and now I’m trying to adapt to it.

Basically the problem goes like this, I want my “p” element to be at the center of a container div, like this.

div
{
width:300px;
height:100px;
}

p
{
position:absolute;
top:auto;
}

</style>
</head>
<body>

<div><p>I want this paragraph to be at the center, but I can't.</p></div>

If anybody could help me on this, I would be really grateful, thanks.

2

If you meant, you just wanted a paragraph to centre horizontally rather than vertically? All you need have done was: p { text-align: center; } for the paragraph. Though if you meant vertical alignment too - which I suspect - or something other please elaborate more on what you specifically were wanting to achieve. Because if you also added a margin to the P element it could give a basic centred effect.

3

No actually, I want it to split the top, right, left and bottom spaces equally, like, I want it to be centered perfectly.

4

add display-table to the div and replace the properties you currently have assigned to the paragraph with display: table-cell; vertical-align: middle;

5

Hey @juleusjohn ;
We’re running a test of our live CSS problem solving product today.
If you want to utilise our experts to get your site sorted out immediately, you can check it out here http://codefix.sitepoint.com/