css div垂直居中对齐_HTML中心文本–如何CSS垂直对齐Div

最新推荐文章于 2023-09-11 18:44:00 发布

cumian8165

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量1.3k

点赞数

文章标签： css html python java 人工智能

原文链接：https://www.freecodecamp.org/news/html-center-text-how-to-css-vertical-align-a-div/

版权

css div垂直居中对齐

In the HTML and CSS world, it's all about the layout structure and the distribution of elements. We usually use HTML to define the markup and structure, while CSS helps us handle the styling and alignment of elements.

在HTML和CSS世界中，一切都与布局结构和元素的分布有关。我们通常使用HTML来定义标记和结构，而CSS则可以帮助我们处理元素的样式和对齐方式。

In this post we are going to learn a little bit about the different ways we can center HTML elements and handle vertical alignment with CSS.

在本文中，我们将学习一些有关将HTML元素居中并使用CSS处理垂直对齐的不同方法。

First we going to learn how to align text with CSS.

首先，我们将学习如何将文本与CSS对齐。

Next, we will cover how to align a div and any other elements.

接下来，我们将介绍如何对齐div和任何其他元素。

And finally we will learn how we can put text and a div together within a container.

最后，我们将学习如何将文本和div放在容器中。

如何居中文字 (How to center text )

There are many way to center text using CSS.

使用CSS可以使文本居中的方法有很多。

使用Float属性 (Using the Float property)

Float is an easy way to align text.

浮动是对齐文本的简单方法。

To place the text on the right side of the layout, we can simply use right as a value for float.

要将文本放置在布局的右侧，我们可以简单地使用right作为float的值。

To place the text on the left side, we use left, like float:left. Look at the example below:

要将文本放在左侧，我们使用left ，就像float:left 。看下面的例子：

.right {
        float: right;
      }
     
      .left {
        float: left;
      }
// HTML

    <span class="right">Right</span>
    <span class="left">Left</span>

To center the text using float we can use margin-left or margin-right and make it 50%, like below.

要使用float使文本居中，我们可以使用margin-left或margin-right并将其设置为50% ，如下所示。

.center {
    float: left;
    margin-left: 50%;
    }

/* HTML*/
<span class="center">Center</span>

You can learn more about the uses of Float here.

您可以在此处了解有关Float更多信息。

使用文字对齐 (Using Text-align)

text-align is a more convenient and more specific way to align text. It allows us to place the text at the center or to the left or right side, as the following example shows:

text-align是一种更方便，更具体的文本对齐方式。它使我们能够将文本放置在center或left或right ，如以下示例所示：

.right {
text-align: right;
}

.left {
text-align: left;
}
.center {
text-align: center;
}
/* HTML */

<p class="right">Right</p>
<p class="center">Center</p>
<p class="left">Left</p>

Learn more about text-align.

了解有关text-align更多信息。

如何对齐`div` (How to align a `div` )

Well, there are a plenty of ways to do that.

好吧，有很多方法可以做到这一点。

The same way we use Float to align text, we can use it to align a div element as well.

与使用Float对齐文本的方式相同，我们也可以使用它对齐div元素。

Float does the job, but CSS gives us better options that are more convenient and elegant. Have you heard of Flexbox? Or css-grid?

Float可以完成工作，但是CSS为我们提供了更好的选择，更加方便和优雅。您听说过Flexbox吗？还是CSS网格？

Well, these two methods provide very modern ways to align and work with your layout in CSS. Let's look at Flexbox in more in detail.

好吧，这两种方法提供了非常现代的方式来对齐和使用CSS中的布局。让我们更详细地了解Flexbox。

弹性盒 (Flexbox )

Flexbox offers an easy and straightforward way to align a div – and it's my favorite method so far to handle layouts in CSS (I use it everyday).

Flexbox提供了一种简单且直接的方法来对齐div –这是迄今为止我最喜欢的用于处理CSS布局的方法(我每天都使用它)。

Let's look at what we'd do with Flexbox to see how it works by recreating the same example as above.

让我们看看我们如何通过重新创建与上面相同的示例来对Flexbox进行操作，以了解其工作原理。

The example:

这个例子：

The code:

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Flexbox</title>
    <style>
      .container {
        display: flex;
      }
      .container div {
        width: 33%;
        height: 60px;
      }

      .left {
        background: yellow;
      }
      .right {
        background: red;
      }
      .center {
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">Left div</div>
      <div class="center">centered div</div>
      <div class="right">right div</div>
    </div>
  </body>
</html>

let's break it down

让我们分解一下

We always define a div parent using display:flex to apply Flexbox. So we make all the div's children inside the parent div able to be handled using Flexbox properties .
我们总是使用display:flex定义div父级来应用Flexbox 。因此，我们可以使用Flexbox属性处理父div所有div的子Flexbox 。
The flex-direction uses the row direction by default, which means the elements will be placed vertically within the container.
flex-direction默认使用row方向，这意味着元素将垂直放置在容器中。
With the justify-content property we can align a div's children(s) in different directions like the following example:
使用justify-content属性，我们可以沿不同的方向对齐div的子级，如以下示例所示：

.container{
 display: flex:
 justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */

}

justify-content:center places the elements in the center of the container.
justify-content:center将元素放置在容器的中心。
justify-content:flex-start puts the elements at the beginning of the container on the left.
justify-content:flex-start将元素放在容器左侧的开头。
justify-content:flex-end places elements at the end of the container on the right side.
justify-content:flex-end将元素放在容器右侧的末尾。
justify-content:space-around makes the elements fit in the container and puts an equal gap between all the elements.
justify-content:space-around使元素适合容器，并在所有元素之间放置相等的间隙。
justify-content:space-evenly distributes the elements within the parent container equally with the same space, and same width.
justify-content:space-evenly将元素justify-content:space-evenly分布在父容器中，并具有相同的空间和相同的宽度。

The example above applies to all elements' children as a group.

上面的示例适用于所有元素的子级。

Imagine if we wanted to align a single div inside the container. We can always use align-self to align a single element.

想象一下，如果我们想在容器内对齐单个div 。我们总是可以使用align-self来对齐单个元素。

.container div{
 align-self:center /* can have: flex-start, or flex-end*/
}

We can apply the same thing to a text with Flexbox as in the following example:

我们可以使用Flexbox将相同的内容应用于文本，如以下示例所示：

<style>
.right{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
  
</style>
<div class="right">
<span>right div</span>
</div>

This is a great tweet by Julia Evans which illustrates centering in CSS in general:

这是Julia Evans的很棒的推文，说明了CSS的总体定位：

结语 (Wrap up)

There are many way to center elements in CSS. And you will always learn new things over time as you practice more and more.

在CSS中有多种居中元素的方法。随着您越来越多地练习，您将总是随着时间的流逝学习新事物。

So I recommend that you work through some examples from what you learned today so it sticks.

因此，我建议您从今天学到的例子中学习一些实例，以便坚持下去。

You should follow me Twitter 🐦
您应该按照我的Twitter 🐦
Check out My Github
看看我的Github
Visit my Blog
访问我的博客

翻译自: https://www.freecodecamp.org/news/html-center-text-how-to-css-vertical-align-a-div/

css div垂直居中对齐

cumian8165

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css div垂直居中对齐_HTML中心文本–如何CSS垂直对齐Div

css div垂直居中对齐In the HTML and CSS world, it's all about the layout structure and the distribution of elements. We usually use HTML to define the markup and structure, while CSS helps us handle the styl...
复制链接

扫一扫