How to Align Images in a Row All Vertically Aligned in The Middle No Matter What Height and with a Fluid Width

How do I align images in a row all vertically aligned in the middle no matter what height and with a fluid width?

I think this is what you're asking for.

.container > div {  display: inline;}.container img {  max-width: 100%;  vertical-align: middle;}

<div class="container">  <div>    <img src="http://lorempixel.com/100/75/" />  </div>  <div>    <img src="http://lorempixel.com/100/175/" />  </div>  <div>    <img src="http://lorempixel.com/100/25/" />  </div>  <div>    <img src="http://lorempixel.com/150/125/" />  </div></div>

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

How can I align 3 Images (Logos) in a row over the hole width and keep them aligned that way on smaller displays

I came up with this solution: Instead of defining a minimum space in css I added more space into the images themselves. Now they can touch eachother and it still looks good. With display: flex; and justify-content: space-between; I arranged them in a row. With max-width: 100%; and height: auto; the Images auto-resizes on smaller screens. It works for me now.

.logo-container {  display: flex;  justify-content: space-between;}.logo {  max-width: 100%;  height: auto;}

<div class="logo-container"><img class="logo" src="https://via.placeholder.com/100x80.png"><img class="logo" src="https://via.placeholder.com/195x80.png"><img class="logo" src="https://via.placeholder.com/175x80.png"></div>

Put elements in a row and keep vertically centered no matter the size

Here is something that maybe what you're looking for, with vertical centering.

Here is a fiddle

And the code :

Css:

.cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

HTML:

<div id="panel-1" class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="row">
            <div class="col-xs-2 cell">
                <button type="button" class="btn btn-default some-button">button!</button>
            </div>
            <div class="col-xs-8 cell">
                <h4 class="panel-title pull-left heading">
                  <a>Short</a>
                </h4>
            </div>
            <div class="col-xs-2 cell" >
                <div class="btn-group">
                    <button type="button" class="btn btn-default">a</button>
                    <button type="button" class="btn btn-default">b</button>
                    <button type="button" class="btn btn-default">c</button>
                </div>
            </div>
        </div>
    </div>
    <div id="panel-2" class="panel panel-default">
        <div class="panel-heading clearfix">
            <div class="row">
                <div class="col-xs-2 cell">
                    <button type="button" class="btn btn-default some-button">button!</button>
                </div>
                <div class="col-xs-8 cell">
                    <h4 class="panel-title pull-left heading">
                        <a>Some string that's really longish and stuff hehe right? (looooong long long)</a>
                    </h4>
                </div>
                <div class="col-xs-2 cell">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">a</button>
                        <button type="button" class="btn btn-default">b</button>
                        <button type="button" class="btn btn-default">c</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

vertical-align with Bootstrap 3

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.

Demos link:

- Bootstrap 3

- Bootstrap 4 alpha 6

You still can use a custom class when you need it:

.vcenter {    display: inline-block;    vertical-align: middle;    float: none;}

<div class="row">    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">        <div style="height:10em;border:1px solid #000">Big</div>    </div><!--    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">        <div style="height:3em;border:1px solid #F00">Small</div>    </div></div>

How to get float:right button to vertically align in the middle

The cleanest way to do that is to use flex like this:

Add display: flex to your outer div panel-footer [Check code below]
Remove the float and use text-align:right on the span for the button. [Check code below]
Add align-self: center to the inner span. [Check code below]

For 1:

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

For 2:

.header-footer-item {
        text-align: right;
}

For 3:

.header-footer-item {
    align-self: center;
}

jsFiddle: https://jsfiddle.net/d1vrqkn9/4/