CSS provides centering HTML elements. HTML elements can have different layouts by using CSS. In this tutorial, we will learn how to center text, image, text block elements of HTML with CSS.
CSS提供居中HTML元素。 通过使用CSS,HTML元素可以具有不同的布局。 在本教程中,我们将学习如何使用CSS将HTML的文本,图像,文本块元素居中。
文本居中线 (Centering Lines Of Text)
CSS provides the text-align
attributes where it will set the alignment of the text elements. center
value can be provided to this attribute to center text elements like below. In this example, we will center text elements like h2
and p
.
CSS提供了text-align
属性,它将在其中设置文本元素的对齐方式。 可以向此属性提供center
值,以使文本元素居中,如下所示。 在此示例中,我们将使文本元素(例如h2
和p
居中。
<html>
<head>
<style>
h2 {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<h2>Caption</h2>
<p>This is a centered text</p>
<p>This is a centered text</p>
<p>This is a centered text</p>
<p>This is a centered text</p>
<p>This is a centered text</p>
<p>This is a centered text</p>
<p>This is a centered text</p>
</body>
</html>
使文本或图像块居中(Centering a Block Of Text Or Image)
In some cases, we may need to center not only the given text or letters, completely the block of the text. We can use the margin-left
and margin-right
attributes by specifying the width of the block. In this example, we will set the margin-left and margin-right attributes as auto and set the width to 12em which will set the body size of the text block.
在某些情况下,我们可能不仅需要将给定的文本或字母居中,还需要将整个文本块居中。 通过指定块的宽度,我们可以使用margin-left
和margin-right
属性。 在此示例中,我们将margin-left和margin-right属性设置为auto,并将width设置为12em,这将设置文本块的正文大小。
<html>
<head>
<style>
h2 {
text-align:center;
}
p {
margin-left: auto;
margin-right: auto;
width: 12em
}
</style>
</head>
<body>
<h2>Caption</h2>
<p>This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.This is a centered text.v</p>
</body>
</html>
将块或图像垂直居中(Centering A Block or An Image Vertically)
Up to now we have centered given text or image elements horizontally but we can also center vertically using vertical-align
CSS attribute. In this example, we will center given text vertically by providing the middle
as value to the vertical-align attribute.
到目前为止,我们已经将给定的文本或图像元素水平居中,但是我们也可以使用vertical-align
CSS属性vertical-align
居中。 在本示例中,我们将给定文本的middle
作为垂直对齐属性的值。
<html>
<head>
<style>
h2 {
text-align:center;
}
div {
margin-left: auto;
margin-right: auto;
width: 12em;
vertical-align:middle;
}
</style>
</head>
<body>
<DIV class="container">
<P>This small paragraph...
</DIV>
</body>
</html>
居中图像 (Center An Image)
We can also center an image by using margin-left
and margin-right
CSS attributes. We will provide auto
as value to the margin-left and margin-right.
我们还可以通过使用margin-left
和margin-right
CSS属性来居中图像。 我们将为左边距和右边距提供auto
值。
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>This text is normal text where there is no specific alingment about it.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
使用填充垂直居中(Centering Vertically using Padding)
We can use the padding
attribute of the CSS in order to center the given text or image vertically.
我们可以使用CSS的padding
属性来使给定的文本或图像垂直居中。
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>Center Vertically</h2>
<p>We can use the padding property in order to center vertically</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
垂直居中和水平居中(Centering Vertically and Horizontally)
We can also center the given text or image vertically and horizontally. We will use line-height
and vertical-align
attributes with different values.
我们还可以将给定的文本或图像垂直和水平居中。 我们将使用具有不同值的line-height
和vertical-align
属性。
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>We can also center the given text or image vertically and horizontally. We will use line-heigh and vertical-align attributes with different values</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
翻译自: https://www.poftut.com/centering-html-elements-with-css/