I know this has been asked a thousand time but I can't find a way to make the text and image to be centered vertically.
I'm using Twitter Bootstrap 3 with dynamic content so therefor, I do not know the size on neither the text nor the image. Plus, I want it all to be responsive.
I've created a bootply that summarize the kind of layout I'm trying to achieve. Basically, I want the text and image to be vertically centered. The text is not always bigger than the image.
Can someone help me out with this please?
Thank you.
This question is related to
html
css
twitter-bootstrap
twitter-bootstrap-3
You can use display:inline-block instead of float and vertical-align:middle with this CSS:
.col-lg-4, .col-lg-8 {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
The demo http://bootply.com/94402
Option 1 is to use display:table-cell. You need to unfloat the Bootstrap col-* using float:none..
.center {
display:table-cell;
vertical-align:middle;
float:none;
}
Option 2 is display:flex to vertical align the row with flexbox:
.row.center {
display: flex;
align-items: center;
}
http://www.bootply.com/7rAuLpMCwr
Vertical centering is very different in Bootstrap 4. See this answer for Bootstrap 4 https://stackoverflow.com/a/41464397/171456
Source: Stackoverflow.com