在同一行上对齐具有不同高度的元素

Question

我试图在同一水平轴上显示多个圆圈，但宽度和高度不同。问题是圆圈缩小了。

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/

Answer 1

您不应该使用表格布局。您的HTML在语义上不代表表格，因此table元素可供使用。

使用Flexbox可以实现您的目标。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可能需要read more about Flexbox on MDN。

Answer 2

一个简单的flexbox解决方案。请务必将flex-shrink设置为0，因为初始值为1，这样可以在必要时缩小灵活项目以防止容器溢出。

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/

Answer 3

试试这个：

<强> 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; }

使用flexbox，是实现目标的最简单方法。

这是一个小提琴https://jsfiddle.net/itsag/sk3tdo4L/

希望它有所帮助！

Answer 4

我认为您的问题可以在样式中找到。 对于每个圆圈，您需要删除样式

display:table-cell
vertical-align: middle;

然后你需要引入行高。行高应该等于圆的高度，对于较小的圆，你将有

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

然后，您还需要将border-radius从50％增加到100％

border-radius:100%;

因此，你的CSS不会是这样的

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;
    }

这应该对你有帮助。

Answer 5

Flexbox的：

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

如果您想在图片之间留出空格，请使用：

margin-left: 

或

margin-right: 

Answer 6

试试这个

 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>