Bootstrap — Display Flex with margin - html

Question

I have this HTML page, where I have an gallery of divs with texts inside it. I want the text to fit and come in the center of the div, but still want to keep the d-flex flex-wrap class for it to adjust based on the window size.
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>
Right now, the texts in the divs are not fitting it, which I want it to fit with margin of 50px on left and right. I also want the texts to vertically align, which stopped working after I added the d-flex flex-wrap class. Can someone please help me? I'm a total beginner in CSS.

Answer 1

The text is obviously to big for the word-card's height. Other than that, you could just match the line-height of the text with the height of the word-card, like so:
.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>
Or for a more flexible solution, you could use 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

Firstly, you can work by lowering the font size of your text within the divs, since it seems a bit too large to fit within the div.
To center the text, try this:
New CSS Code
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;
}