一个div内放置两个文本模块,如何让子文本模块换行且垂直水平居中在父div模块内,子文本内容不给固定宽高
时间: 2023-07-20 19:31:15 浏览: 91
要在一个 div 中放置两个文本模块,并使它们在需要时自动换行,并且垂直水平居中在父 div 模块内,可以使用 flexbox 布局。以下是 HTML 和 CSS 示例代码:
HTML 代码:
```html
<div class="container">
<div class="text">第一个文本模块</div>
<div class="text">第二个文本模块</div>
</div>
```
CSS 代码:
```css
.container {
display: flex; /* 使用 flexbox 布局 */
flex-wrap: wrap; /* 换行 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.text {
margin: 10px; /* 文本模块的外边距 */
background-color: #ccc; /* 文本模块的背景色 */
}
```
在上面的示例代码中,我们创建了一个名为 container 的父 div 模块,并在其中放置了两个名为 text 的子 div 模块,这两个子 div 模块中包含文本内容。我们使用了 flexbox 布局,并设置了 flex-wrap 属性为 wrap,这样子 div 模块就可以在需要时自动换行。我们还设置了 justify-content 和 align-items 属性为 center,这样子 div 模块就可以垂直水平居中在父 div 模块内。
由于我们不给子文本模块固定宽高,所以它们的大小将根据文本内容的大小而自动调整。你可以根据你的需要修改文本模块的外边距和背景色等属性。
希望这能够帮助到你!
阅读全文