CSS Table Display Mixture of Fixed and Dynamic Widths-CodePudding

Sorry about the title, I couldn't really think of a way to explain this in a single line.

I am attempting to lay out a "table" with three "cells" in a "column" (quotes are because I want to use CSS to lay this out, not a table). The center cell contains an image, which I want to be centered on, and I want the "cells" on either side of the image to be equal in width.

I am using this as my CSS:

.psuedo-table {
    display: table;
    width: 100%;
    table-layout: fixed;
    border: 0;
    margin-left: auto;
    margin-right: auto;
}

.psuedo-table-row {
    display: table-row;
}

.psuedo-table-column {
    display: table-cell;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

In my HTML, I have the following:

<div >
   <div >
      <div  style="background-color: #446078;">&nbsp;</div>
      <div  style="max-width: 100%; white-space: nowrap;">
         <img src="/assets/images/appheader.png" />
      </div>
      <div  style="background-color: #162a52;">&nbsp;</div>
   </div>
</div>

Unfortunately, this doesn't work, as the three "cells" are the same width, and I need the middle "cell" to expand to the width of the <img> and the cells on the left and right to be equal width.

This is probably simple, but if anyone can help I would appreciate it.

CodePudding user response：

Use flex. See the snippet below.

.psuedo-table-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.psuedo-table-column:nth-child(1),
.psuedo-table-column:nth-child(3) {
  flex: 1;
}

<div >
  <div >
    <div  style="background-color: #446078;">&nbsp;</div>
    <div >
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Giraffe_Mikumi_National_Park.jpg/800px-Giraffe_Mikumi_National_Park.jpg" width="300" />
    </div>
    <div  style="background-color: #162a52;">&nbsp;</div>
  </div>
</div>

CodePudding user response：

CSS flex is an amazing solution for that:

.psuedo-table {
  display: flex;
  width: 100%;
  border: 1px solid red;
}

.psuedo-table > div {
  flex: 1 1 auto;
}
.psuedo-table > div.image {
  flex: 0 1 80%;
}

.psuedo-table > div:first-child {
  background-color: #446078;
}
.psuedo-table > div:last-child {
  background-color: #162a52;
}

<div >
  <div>&nbsp;</div>
  <div >
    image
  </div>
  <div>&nbsp;</div>
</div>