Question

我在 外部中有一个内部 （孩子） div em> （父母） div 。

内部div在外部div内水平和垂直居中对齐。在父元素上使用表格单元格和垂直对齐：居中，在子元素上使用显示：行内块。

我想将内部div内的文本都居中对齐以及垂直方向。

这个问题似乎重复了，但事实并非如此。其他链接上提供的解决方案通常基于-

线高：我觉得这不是一个好的解决方案，因为它取决于父母的身高。
显示：表格单元格：内部元素在我的解决方案中已经是 inline-block ，无法在其上保留另一个 display 属性同一块。
Flex ：这是我所不知道的，因此接受了@ xenio-gracias发布的解决方案。

如何实现？

这是我当前的工作代码：

/* Lesson 3 (PART 1): div inside div */
.outer-lesson3 {
	border: 1px solid lightcoral;
	display: table-cell;
	width: 300px;
	height: 300px;
	vertical-align: middle;
	text-align: center;
}

.inner-lesson3 {
	border: 1px solid mediumseagreen;
	display: inline-block;
	width: 100px;
	height: 150px;	
}
/* Lesson 3 (PART 1) ENDS */

<html>

<head>
    <link rel="stylesheet" href="prac.css">
</head>

<body>
    <!-- Lesson 3 -->
    <div class="outer-lesson3">
        <div class="inner-lesson3">
            Horizontally & Vertically Center 'div' inside 'div'
        </div>
    </div>
</body>

</html>

在CSS中定位：将子DIV中的文本居中对齐，该子DIV已在父DIV中水平和垂直对齐

0 个答案: