CSS Aligning Things Vertically and Horizontally

Question

I have an image and two sets of text (one is a "label" and one is a "ranking").

<div class="contentsInfo">
  <img src="http://lorempixel.com/90/30" />
  <span>Here is some info</span>
  <span>20</span>
</div>

I would like to align each to be centered vertically, the label to show up next to the image, and for the ranking data to be right aligned in the container.

However, it is not aligning in the middle, and the info and ranking "columns" are being switched (the ranking shows up in the middle, and the label to the right side).

Here is my css:

.contentsInfo
{
    font-size: 0.80em;
    border-bottom: 1px grey dotted;
    vertical-align: middle;
    display: table;
    width: 100%;
}

.contentsInfo>span
{
    float: right; 
    margin-left: 5px;
    vertical-align: middle;
    display: table-cell;
}

.contentsInfo span
{
    font-size:   1.1em;
}

.contentsInfo img
{
    height: 30px; 
    vertical-align: middle;
    margin-right: 2px 5px 2px 0px;
    padding: 2px 0px;
}

This is what you want to looks like? https://jsfiddle.net/wjsLegtz/2/ — ketan, Mar 09 '16 at 05:01
@Michael_B I can get things to align vertically this way but can't get the ranking info to move all the way to the right. — Just Another Noob, Mar 09 '16 at 05:03
@ketan Very close! I would prefer the middle column to be right next to the image. — Just Another Noob, Mar 09 '16 at 05:04
@JustAnotherNoob check this [question](http://stackoverflow.com/q/31201651/1577396) — Mr_Green, Mar 09 '16 at 05:07

score 0 · Answer 1 · answered Mar 09 '16 at 05:07

You can do like following way using display:flex. I have added on class ranking to align it right side.

*{
  margin:0;
}
.contentsInfo
{
    font-size: 0.80em;
    border-bottom: 1px grey dotted;
    display: flex;
    align-items: center;
    
}

.contentsInfo>span
{
    margin-left: 5px;
     display: flex;
    flex: 1 1 auto;
    margin-right: 5px;
}


.ranking{
  justify-content: flex-end;
}

.contentsInfo span
{
    font-size:   1.1em;
}

.contentsInfo img
{
    height: 30px; 
    padding: 2px 0px;
}

<div class="contentsInfo">
  <img src="http://lorempixel.com/90/30" />
  <span>Here is some info</span>
  <span class="ranking">20</span>
</div>

Fiddle

score 0 · Accepted Answer · answered Mar 09 '16 at 05:11

Wrap your contents in elements and do the following:

HTML:

<div class="contentsInfo">
  <div>
    <img src="http://lorempixel.com/90/30" />
    <span>Here is some info</span>
  </div>

  <div>

    <span>20</span>
  </div>
</div>

CSS:

body,
html {
  padding: 0px;
  margin: 0px;
}

.contentsInfo {
  font-size: 0.80em;
  border-bottom: 1px grey dotted;
  vertical-align: middle;
  display: table;
  width: 100%;
}

.contentsInfo>div {
  margin-left: 5px;
  vertical-align: middle;
  display: table-cell;
}

.contentsInfo > div:first-child {
  width: 100%;
}

.contentsInfo > div:last-child {
  white-space: nowrap;
}

.contentsInfo span {
  font-size: 1.1em;
}

.contentsInfo img {
  height: 30px;
  vertical-align: middle;
  margin-right: 2px 5px 2px 0px;
  padding: 2px 0px;
}

Working Fiddle

CSS Aligning Things Vertically and Horizontally

2 Answers2