Question

我有这个HTML页面，其中有div s画廊，其中包含文本。我希望文本适合div的中心，但仍希望保留d-flex flex-wrap类，以便根据窗口大小进行调整。

div.container-fluid {
    padding: 5px !important;
    margin: 0px !important;
}

div.word-card {
    display: table-cell;
    width: 300px;
    height: 350px;
    border: 1px solid black;
    vertical-align: middle;
}

span.word-text {
    font-size: 100px;
    margin:0px 50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid d-flex flex-wrap">
    <div class="word-card">
        <span class="word-text">squander</span>
    </div>
    <div class="word-card">
        <span class="word-text">lead</span>
    </div>
    <div class="word-card">
        <span class="word-text">accurate</span>
    </div>
    <div class="word-card">
        <span class="word-text">Interdisciplinary</span>
    </div>
</div>

现在，div中的文本不适合它，我希望它与左右50px的边距匹配。我还希望文本垂直对齐，这在添加d-flex flex-wrap类之后停止了。有人可以帮帮我吗？我是CSS的初学者。

Answer 1

对于单词卡的高度，文本显然很大。除此之外，您可以将文本的行高与单词卡的高度匹配，如下所示：

.word-card {
    display: table-cell;
    width: 300px;
    height: 350px;
    border: 1px solid black;
    text-align: center;
}

.word-text {
    font-size: 40px;
    line-height: 350px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid d-flex flex-wrap">
    <div class="word-card">
        <span class="word-text">squander</span>
    </div>
    <div class="word-card">
        <span class="word-text">lead</span>
    </div>
    <div class="word-card">
        <span class="word-text">accurate</span>
    </div>
    <div class="word-card">
        <span class="word-text">Interdisciplinary</span>
    </div>
</div>

或者为获得更灵活的解决方案，可以使用flexbox：

.word-card {
    width: 300px;
    height: 350px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.word-text {
    font-size: 40px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid d-flex flex-wrap">
    <div class="word-card">
        <span class="word-text">squander</span>
    </div>
    <div class="word-card">
        <span class="word-text">lead</span>
    </div>
    <div class="word-card">
        <span class="word-text">accurate</span>
    </div>
    <div class="word-card">
        <span class="word-text">Interdisciplinary</span>
    </div>
</div>

Answer 2

首先，您可以通过减小div中文本的字体大小来进行工作，因为它看起来太大了，无法容纳div。

要使文本居中，请尝试以下操作：

新的CSS代码

 div.container-fluid {
    padding: 5px !important;
    margin: 0px !important;
    text-align: center;
}

div.word-card {
    display: table-cell;
    width: 300px;
    height: 350px;
    border: 1px solid black;
}

span.word-text {
    font-size: 20px;
   
}

引导程序—带边距显示Flex

2 个答案: