CODEWITHSUNDEEP
htmlcssflexbox
Sebastian Corneliu Vîrlan
Sebastian Corneliu Vîrlan

Reputation: 1700

Align elements with different heights on the same row

I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.circles-container {
  display: table;
  border-spacing: 40px;
}

.row {
  display: table-row;
}

.circle {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.cell {
  display: table-cell;
}

.big-circle {
  width: 300px;
  height: 300px;
}
<div class="circles-container">
  <div class="row">
    <div class="cell">
      <div class="circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="big-circle circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="big-circle circle">
        <span>TEXT</span>
      </div>
    </div>
  </div>
</div>

JSFIDDLE: https://jsfiddle.net/cxuxgy0u/

Upvotes: 2

Views: 4134

Answers (6)

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.

What you want to do can be achieved with Flexbox.

article {
  display: flex;
  align-items: center;
}

article > div + div {
  margin-left: 1rem;
}

article > div {
  flex-shrink: 0;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

article > div:nth-child(2) {
  height: 6rem;
  width: 6rem;
}
<article>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
</article>

You might want to read more about Flexbox on MDN.

Upvotes: 5

slikk
slikk

Reputation: 125

Flexbox:

container {
    display: flex;
    justify-content: center;
}

If you want space between the pictures, use:

margin-left:

or 

margin-right:

Upvotes: 0

Sunday Okoi
Sunday Okoi

Reputation: 303

I think your problem is found in the styling. For each circle, you need to remove the style

display:table-cell
vertical-align: middle;

and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have

line-height:100px //this brings the text to the middle of the circle vertically.

Then also, you need to increase the border-radius from 50% to 100%

border-radius:100%;

Therefore, your css will not look like this

body, html {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .circles-container{
        display: table;
        border-spacing: 40px;             
    }
    .row {
        display: table-row;
    }
    .circle {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 100%;
        text-align: center;
        line-height:100px;
    }
    .cell {
        display: table-cell;
    }
    .big-circle {
        width: 300px;
        height: 300px;
        line-height:300px;
    }

This should help you.

Upvotes: 1

Ajay Gupta
Ajay Gupta

Reputation: 2033

Try this:

HTML

<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>

CSS

.container {
  display:flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

.circle {
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }

Uses flexbox and is the simplest way to achieve what you want.

Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/

Hope it helps!

Upvotes: 1

Ayoub Aze-r Hassini
Ayoub Aze-r Hassini

Reputation: 11

try this

 body, html {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .circles-container{
                display: table;
                border-spacing: 40px;             
            }
            .row {
                display: flex;
            }
            .circle {
                padding: 40px 30px;
                border: 1px solid #000;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;
                position: relative;
            }
            .cell {
            }
            .big-circle {
              padding: 150px;
            }
        <div class="circles-container">
            <div class="row">
                <div class="cell">
                    <div class="circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="big-circle circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="circle">
                        <span>TEXT</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="big-circle circle">
                        <span>TEXT</span>
                    </div>
                </div>
            </div>
        </div>

Upvotes: -1

Michael Benjamin
Michael Benjamin

Reputation: 371361

A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
  height: 100px;
  border-radius: 50%;
  margin: 20px;
  border: 1px solid #000;
}

.big-circle {
  flex-basis: 300px;
  height: 300px;
}
<div class="circles-container">
  <div class="circle">
    <span>TEXT</span>
  </div>
  <div class="circle">
    <span>TEXT</span>
  </div>
  <div class="big-circle circle">
    <span>TEXT</span>
  </div>
  <div class="circle">
    <span>TEXT</span>
  </div>
  <div class="big-circle circle">
    <span>TEXT</span>
  </div>
</div>

https://jsfiddle.net/cxuxgy0u/7/

Upvotes: 1

Related Questions