📜  如何将一个 div 居中放置在另一个 div 中?

📅  最后修改于: 2021-11-07 08:49:38             🧑  作者: Mango

div标签用于构建 HTML 文档的一个部分或部分,其中放置了其他 HTML 元素,该部分/部分的工作方式就像一个容器,其 CSS 样式可以作为一个单元完成,或者 javascript 可用于执行各种该容器上的任务。

句法:

'This is a div of the web page.>/h3>

This is some text in a div element.

要全面了解 div 标签的用法及其在 HTML 中的实现,请单击此处。

示例:这个示例描述了我们如何将一个 div 放在另一个 div 中。





Placing div within a div
 


GeeksforGeeks

 

Placing div within a div

  

Example of div inside a div.

  

It has background color = #33cc33.

  

This is some text in a div element.

输出:
在 div 中放置一个 div

正如我们所看到的,内部 div 容器占据了内部空间的左侧部分。要将内部 div 容器移动到父 div 的中心,我们必须使用style属性的 margin属性。我们可以通过这个 margin 属性调整任何 HTML 元素周围的空间,只需为它提供所需的值。

现在来介绍这个属性在调整内部 div 中的作用。如果 margin 值设置为 0,即margin : 0 ,它会告诉浏览器 HTML 元素(这里是内部 div)的顶部和底部边距将为 0。此外,如果我们将 margin 的值写为margin : 0 auto ,它命令浏览器根据 HTML 元素的宽度自动将左右边距调整为相同的大小。

内部 div 的语法:

示例:此示例描述了我们如何将 div 居中放置在 div 中。





Center alignment of inside div
 


GeeksforGeeks

 

Center alignment of inside div

  

Example of div inside a div.

  

It has background color = #33cc33.

  

This is some text in a div element.

输出:
位于 div 中心的 Div 图像

您还可以为边距值的第一个参数提供任何值,以提供从顶部和底部到 HTML 元素的一些间隙。要将内部 div 调整到中心位置,只需在第二个参数中写入 auto 。

内部 div 的语法:

示例:此示例显示如何将 div 置于 div 中且边距属性的第一个参数具有非零值。





Center alignment of inside div
 


GeeksforGeeks

 

Center alignment of inside div

  

Example of div inside a div.

  

It has background color = #33cc33.

  

This is some text in a div element.

输出:
将 div 放置在具有顶部和底部边距值的 div 内中心位置的图像

示例:这个示例描述了我们如何并排放置 2 个 div,每个 div 内部都有一个居中对齐的 div。




 
2 div example
 
 

GeeksforGeeks

 

Example with 2 div

  

Example of div inside a div.

  

It has background color = #33cc33.

  

This is some text in a div element.

  

Example of div inside a div.

  

It has background color = #66ff33.

  

This is some text in a div element.

输出:
将 div 放置在 2 div 中的示例的图像