Vertically center and wrap text around another div [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm at a loss here, I've been trying various things for a couple hours trying to get some text to center itself vertically in another div when it is only one line. When there are multiple times, it looks great and wraps beautifully.
Here is a photo of what I'm talking about:
photo
How can I fix the first instance (one line only) so it is centered vertically in the box? Here's a bootply.
Thank you!

Answer 1

Wrap the text you want to center in an HTML element and center that element using flexbox:
.list-item {
min-height: 52px;
border: 1px solid #E0E0E0;
display: flex;
align-items: stretch;
margin: 5px 0;
}
.list-item-status-container {
padding-right: 10px;
display: flex;
align-items: stretch;
border-left: 6px solid #90CAF9;
background-color: #E3F2FD;
max-width: 300px;
white-space: nowrap;
}
.list-item-status-content {
padding-left: 10px;
padding-right: 8px;
margin-top: auto;
margin-bottom: auto;
}
.list-item-content {
font-size: 17px;
display: block;
vertical-align: middle;
font-weight: 500;
padding-left: 8px;
padding-right: 8px;
display: flex;
flex-direction: column;
}
.list-item-content p,
.list-item-status-content > div {
margin-top: auto;
margin-bottom: auto;
}
.list-item-content > div {
width: 200px;
}
.item-unchecked-box {
color: #BDBDBD;
padding-right: 8px;
display: inline-block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<div class="list-item">
<div class="list-item-status-container">
<div class="list-item-status-content">
<div>
<div class="item-unchecked-box">
<i class="fas fa-square fa-lg"></i>
</div>
Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
</div>
</div>
</div>
<div class="list-item-content">
<p>This should be vertically centered if there is room.</p>
</div>
</div>
<div class="list-item">
<div class="list-item-status-container">
<div class="list-item-status-content">
<div>
<div class="item-unchecked-box">
<i class="fas fa-square fa-lg"></i>
</div>
Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
</div>
</div>
</div>
<div class="list-item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, esse deleniti odio fugiat culpa excepturi enim omnis laborum distinctio officia odit laudantium aliquid sint, ad expedita alias. Voluptatem, eveniet, odio.</p>
</div>
</div>

Answer 2

You need to add text-center like below
<div class="list-item-content text-center">
This should be vertically centered if there is room
</div>
</div>
I'm assuming that you are using bootstrap?

Answer 3

You need css to set the parent container to display: table; then the container as display:table-cell;
.list-item-content{
height: 350px; width: 250px; background-color:#F1F1F1;
display: table;
}
.list-item-content .cell{
display:table-cell; text-align: center; vertical-align: middle;
}
<div class="list-item-content">
<div class='cell'>
This should be vertically centered if there is room
</div>
</div>

Answer 4

.list-item-content {
display: flex;
align-items: center;
min-height: 52px;
}
<div class="list-item-content">
This should be vertically centered if there is room
</div>
Since you set the min-height of .list-item to be 52px, that means it's also safe to assume .list-item-context min-height is also 52px.