css middle text box
Question
I have some text in html. About 2 paragraphs.
I want this to appear in the middle, I can do this using in html but I want it to be "in" on the sides, so it only fills the middle of the screen, away from the edges on the sides.
How to do this?
EDIT: DESCRIPTION OF PAGE:
EMPTY SPACE |<------text here------>| EMPTY SPACE
3 answers
solution1
3 ACCPTED 2011-01-27 18:43:14
There are various different ways of centering text in a page. For now I will assume you mean horizontal centering.
You haven't provided any code for anyone to work with, so I will assume the code goes as follows:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus sapien vitae ipsum semper sagittis porta odio tempor. Pellentesque porta mattis porta. Cras in condimentum tellus. Nam porta sapien vel felis aliquam id aliquam neque condimentum.</p>
<p>Mauris in tellus magna. Nam cursus dapibus diam, ut cursus risus placerat sed. Praesent volutpat elementum faucibus. Donec mi arcu, faucibus eget porta a, feugiat eu dui. Sed dapibus feugiat quam, vel venenatis neque venenatis ut. Ut condimentum tellus eget ipsum aliquam eu faucibus erat egestas. Pellentesque ut metus a elit suscipit vulputate id id magna. Praesent eu sem urna, eu fermentum enim.</p>
</body>
</html>
To center the paragraph text in the middle of the page, you need to add the following CSS (in a style element or an external .css file): first example
p
{
text-align: center;
}
This is probably not what you're after because it wont push the text away from the edges. If you would like the text to have a fluid width with some padding, use this CSS instead: second example
p
{
padding: 0 100px;
}
You can of course center the text using both methods to make the text centered and stay away from the edges.
If you would like a static width that stays centered, use this CSS instead of the padding: third example
p
{
margin: 0 auto;
width: 300px;
}
solution2
0 2011-01-27 18:13:12
Think you've looking for margin: 0 auto; which will center your element.
So to achieve
EMPTY SPACE |<------text here------>| EMPTY SPACE
You could do
<div>
<div style="margin: 0 auto; width:300px;">text here</div>
</div>
solution3
-2 2011-01-27 18:12:31
easiest way is to use a table
<table><tr>
<td style="width:15%"></td>
<td>
<------text here------>
</td>
<td style="width:15%"></td>
</tr></table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.