lsaadev lsaadev - 1 month ago 18
CSS Question

Multi-Object position HTML/CSS

I've been trying to get this postioning right for a long time, her's a sketch of that it's supposed to look like:

Sketch

Here's the css that I got going:

.team1 {
margin-left: 9;
}
.team2 {
float: right;
right: 10;
position: relative;
}

.team1text{
float: left;
left: 150;
top:50;
position: relative;
}
.team2text{
float: right;
right: 150;
top:30;
position: relative;
}
.team1winlose{
float: left;
left: 150;
top:50;
position: relative;
}
.team2winlose{
float: right;
right: 150;
top:50;
position: relative;
}
.vs {
positon: relative;
top: 30;
float: right;
right: 50%;
}


But it now looks like this when I open the page:

Result

Answer

With flexbox you could do like this

.wrapper {
  display: flex;
}
.wrapper .logo {
  flex: 0;
}
.wrapper > :not(.logo) {
  flex: 1;
  text-align: center;
}
.wrapper :not(.logo) div {
  font-size: 32px;
  font-weight: bold;
}
.wrapper :not(.logo) span {
  font-size: 16px;
}
<div class="wrapper">

  <div class="logo">
    <img src="http://placehold.it/150">
  </div>
  <div>
    <div>Team 1</div>
    <span>Wins/Losses</span>
  </div>
  <div>
    <div>VS</div>
  </div>
  <div>
    <div>Team 2</div>
    <span>Wins/Losses</span>
  </div>
  <div class="logo">
    <img src="http://placehold.it/150">
  </div>


</div>

For older browsers, display: table

.wrapper {
  display: table;
  width: 100%;
}
.wrapper .logo {
  display: table-cell;
  width: 150px;
}
.wrapper > :not(.logo) {
  display: table-cell;
  width: 20%;
  text-align: center;
  vertical-align: top;
}
.wrapper :not(.logo) div {
  font-size: 32px;
  font-weight: bold;
}
.wrapper :not(.logo) span {
  font-size: 16px;
}
<div class="wrapper">

  <div class="logo">
    <img src="http://placehold.it/150">
  </div>
  <div>
    <div>Team 1</div>
    <span>Wins/Losses</span>
  </div>
  <div>
    <div>VS</div>
  </div>
  <div>
    <div>Team 2</div>
    <span>Wins/Losses</span>
  </div>
  <div class="logo">
    <img src="http://placehold.it/150">
  </div>

</div>