JSFiddle - React, Tailwind, and code Playground

HTML

<div class="object-box first">
    <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg" />
    <span class="caption">This is the caption</span>
</div>

<div class="object-box second">
    <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg" />
    <span class="caption">This is the caption</span>
</div>

CSS

.object-box .caption, .object-box img {
    display: block;
}
.object-box {
    border: 1px solid;
}
.object-box.first {
    display: inline-block;
    margin-left:auto;
    margin-right:auto;
}
.object-box.second {
    float: right;
    margin-left:auto;
    margin-right:auto;
}