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

问题描述 投票：0回答：1

这个问题在这里已有答案：

我在外（父）div中有一个内（子）div。

内部div在水平以及垂直中心对齐在外部div内。在父元素上使用table-cell＆vertical-align：middle并在子元素中显示：inline-block。

我想在水平和垂直方向上对齐内部div内的文本。

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

  1. line-height：我认为这不是一个好的解决方案，因为它取决于父母的身高。
  2. display：table-cell：我的解决方案中内部元素已经是一个内联块，不能在同一个块上保留另一个显示属性。
  3. 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>
html css position center vertical-alignment
1个回答
1
投票

用flexbox来实现它希望这会有所帮助。谢谢

/* 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;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-lesson3 {
  border: 1px solid mediumseagreen;
  display: inline-block;
  width: 100px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.