使用CSS将HTML元素居中

最新推荐文章于 2021-06-21 16:09:23 发布

cunjiu9486

最新推荐文章于 2021-06-21 16:09:23 发布

阅读量280

点赞数

文章标签： css html python css3 html5

原文链接：https://www.poftut.com/centering-html-elements-with-css/

版权

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 h2and 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/

cunjiu9486

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS将HTML元素居中

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提供居中HTM...
复制链接

扫一扫