CODEWITHSUNDEEP
htmlcss
Scott Hooker
Scott Hooker

Reputation: 136

Vertical alignment in css of multiple elements (How to achieve this layout)

enter image description here

One thing I've been struggling with in CSS3 is layouts. I've read this blog post - http://www.toptal.com/css/css-layout-primer-from-classic-approaches-to-the-latest-techniques - and its been helpful for over layout techniques. However, I become a bit stuck when moving down to specific elements. I'm a backend dev by trade so its not my area of expertise.

E.g. given the above image there are rows and rows of these on a page. What would the ideal div structure be and what SASS/CSS would be good to match.

<div class="container">   
  <div class="team1"> Vasco </div>  
  <div class="logo1"> <img>logo image</img> </div>   
    <div class="status"> Finished </div>
  <div class="logo2"> <img>logo image</img> </div> 
  <div class="team2"> flamengo </div> 
</div>

I've toyed with the above div structure and a mixture of floats, inline blocks etc... But I'm now a bit clueless. Equally I can change this to spans, or whatever required.

Upvotes: 1

Views: 46

Answers (3)

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

I'll add a simple flexbox example for solving this issue, although it would require some prefixing in order to have optimal support:

.container {
    display:flex;
    justify-content:center;
    align-items:center;
}

And that's pretty much it. To get majority support you have to do some prefixing and fallbacks for older versions, which looks ugly but works across modern browsers:

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; 
}

Note that browser support isn't 100% for flexbox, but I personally prefer to go with the majority support and fall back on browsers that require it.

Here is a simple demo:

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
  
.container div{
  margin:10px;
}

.team1,
.team2{
  font-size:24px;
}

.logo1,
.logo2{
  width:150px;
  height:150px;
  border:solid 1px black;
}
<div class="container">   
  <div class="team1"> Vasco </div>  
  <div class="logo1"> <img>logo image</img> </div>   
    <div class="status"> Finished </div>
  <div class="logo2"> <img>logo image</img> </div> 
  <div class="team2"> flamengo </div> 
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

Just for completeness, I'll throw in a flexbox variation.

.container {
  display: flex;
  background: #eee;
  justify-content: space-beteeen;
  align-content: center;
}
.container > div {
  flex: 1 0 auto;
  padding: 5px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container .team {
  width: 25%;
  font-size: 150%;
  font-weight: bold;
}
.container .team:first-child {
  text-align: right;
}
.container .team:last-child {
  text-align: left;
}
.container .logo {
  width: 15%;
}
.container > div img {
  display: block;
  max-width: 100%;
}
<div class="container">
  <div class="team">Vasco</div>
  <div class="logo">
    <img src="http://placehold.it/1000x750" />
  </div>
  <div class="status">Finished</div>
  <div class="logo">
    <img src="http://placehold.it/1000x750" />
  </div>
  <div class="team">flamengo</div>
</div>

JSfiddle Demo

Upvotes: 3

isherwood
isherwood

Reputation: 61063

Don't use tables for layout. Ever. 

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
    background: #eee;
}
.container > div {
    display: table-cell;
    width: 2%;
    padding: 5px 10px;
    text-align: center;
    vertical-align: middle;
}
.container > div img {
    display: block;
    max-width: 100%;
}

Demo

Here's a version with varying widths for team and logo cells. Notice that the images behave responsively in both examples. 

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
    background: #eee;
}
.container > div {
    display: table-cell;
    padding: 5px 10px;
    text-align: center;
    vertical-align: middle;
}
.container .team {
    width: 25%;
}
.container .logo {
    width: 15%;
}
.container > div img {
    display: block;
    max-width: 100%;
}

Demo 2

Upvotes: 1

Related Questions