我想完美对齐一个段落,使整个段落位于页面的中心,但左侧和右侧完全对齐。这是一个完美对齐的段落的图片示例:
该段落看起来像是在某种盒子中,左右两侧完全笔直。如何在 css 或 html 中执行此操作?
包装器需要通过 CSS 应用文本对齐:
text-align:justify;
text-justify:inter-word;
一般来说,与打印的“排版”应用程序相比,浏览器作为完全对齐的文本做得很糟糕。一般来说,浏览器上的完全对齐会使文本更难阅读,通常应该避免。
CSS:
.justify {
text-align:justify;
text-justify:inter-word;
}
HTML
<div class="justify"> ...your text... </div>
CSS 来证明文本:
style="text-align:justify"
好吧,单词之间的完美间距是通过对齐文本来完成的:
p {
text-align:justify;
text-justify:inter-word;
}
段落在页面中心的定位需要一套通用的规则:
p {
width: auto;
margin: 0 auto;
}
边距规则将段落的顶部和底部边距设置为 0(如果您愿意,可以将其修改为足够的间距),并且自动确保左右边距相同。
<html>
<head>
<style>
div
{
text-align:justify;
text-justify:inter-word;
}
</style>
</head>
<body>
<h1>Perfect Box Type Alignment</h1>
<div>I want to perfectly align a paragraph so that the entire paragraph is in the center of the page but the left and right side are perfectly aligned. Here's a picture example of a paragraph that is perfectly aligned:I want to perfectly align a paragraph so that the entire paragraph is in the center of the page but the left and right side are perfectly aligned. Here's a picture example of a paragraph that is perfectly aligned::</div>
</body>
</html>
请调整浏览器窗口的大小以查看其工作原理。
试试这个来解决你的问题:
put STYLE code inside external CSS file or <head><style> Write style code here..</style></head>
.proper_alignment_paragraph_class
{
text-align:justify;
text-justify:inter-word;
}
Put this code inside <body></body> tag.
<div class="proper_alignment_paragraph_class">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>