css div 水平居中
Introduction:
介绍：
Working with DIVs has become a regular thing and divs are used for many purposes to mention such as they are used to structure our code and to segregate our various sections of codes. Besides, we know of many properties that we can simply just to make our website or web page responsive.
使用DIV已成为常事，并且div用于表示许多目的，例如，它们用于结构化我们的代码并分离我们的代码的各个部分。 此外，我们知道许多属性，仅使我们的网站或网页具有响应能力即可。
So, one must keep learning numerous properties or functions or methods and many such useful things for your web development. If you are a beginner, then it is a must that you keep learning new things for creating responsive and attractive websites or web pages. Although, there are times when we forget about the properties or functions to be implied. In that case, you can always refer to articles like these and there are abundant things out there for you to learn and grow as a good and professional web developer.
因此，必须不断学习许多特性，函数或方法，以及许多对Web开发有用的东西。 如果您是初学者，则必须不断学习新知识，以创建具有响应性和吸引力的网站或网页。 尽管有时我们会忘记要隐含的属性或功能。 在这种情况下，您总是可以参考这些文章，并且有很多东西供您学习并成长为一个优秀且专业的Web开发人员。
Benefits:
优点：
The real task here is to centrally align the DIV. The DIVs as we know are used for structuring the code so that the code becomes sorted and neat as well. Besides, by using DIVs many classes are defined that make the work quite easy as well. It is a good habit to use DIVs wherever possible in your code. To give your code a proper structure and if you want your code to appear neat, using DIVs is a must. Not just that but using DIVs you can create different sections in your website or web page ad you can assign various ids as well.
这里的真正任务是将DIV集中对齐 。 我们知道的DIV用于结构化代码，以使代码也变得井井有条。 此外，通过使用DIV，定义了许多类，这些类也使工作变得非常容易。 在代码中尽可能使用DIV是一个好习惯。 为了给您的代码一个适当的结构，并且如果您希望代码看起来整洁，则必须使用DIV。 不仅如此，您还可以使用DIV在网站或网页广告中创建不同的部分，也可以分配各种ID。
Task:
任务：
To horizontally center the div in a webpage in CSS all you need to do is set the margin to 0 auto so that the zero will make our div a zero margin vertically and an auto-adjust margin horizontally. And put the text-align as the center. Note that you can set the width of your choice to make this trick work.
要使div在CSS网页中水平居中，您需要做的就是将margin设置为0 auto，这样零将使我们的div在垂直方向上为零利润，在水平方向上自动调整利润 。 并以text-align为中心 。 请注意，您可以设置选择的宽度以使此技巧起作用。
Let's make it clear by looking at the syntax,
我们来看一下语法，
element {
margin: 0 auto;
width: value;
text-align: center;
}
Example:
例：
<html>
<head>
<style>
div {
margin: 0 auto;
width: 400px;
text-align: center;
font-size: 40px;
background-color: #f40;
color: #fff;
}
</style>
</head>
<body>
<h1>This is IncludeHelp</h1>
<div>
<p>How to horizontally center a div?</p>
</div>
</body>
</html>
Output
输出量
In the above example, note that the paragraph written inside the div tag is aligned at the center of the webpage horizontally. So as you can see that it was not that tough, just by making use of properties here and there and you got what you wanted.
在上面的示例中，请注意div标签内编写的段落在网页的中心水平对齐。 正如您所看到的，这并不困难，仅通过在各处使用属性即可获得所需的内容。
Pretty easy right? For some of you, this might be a new thing as well, aligning divs centrally comes in handy very much. So, what are you waiting for? Go ahead and start making use of new-found knowledge! The most important thing is, do not forget to have fun!
很容易吧？ 对于某些人来说，这也可能是新事物，集中对齐div非常方便。 那你还在等什么？ 继续并开始利用新发现的知识！ 最重要的是，不要忘记找乐子！
翻译自: https://www.includehelp.com/code-snippets/how-to-horizontally-center-a-div-using-css.aspx
css div 水平居中
扫一扫
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
