Question

我有一个简单的水平框，有多个圆形化身。头像将是图像或CSS圈，但所有元素应在一行中对齐，文本在非图像圈内居中。

我不能让这件事发生。

小提琴：http://jsfiddle.net/lilbiscuit/dqsnbma5/

HTML：

<div class="outer">
  <div class="circle" style="left:0;">1</div>
  <img  src="https://pbs.twimg.com/profile_images/887828156886986752/F7XIdhSg_400x400.jpg" />
  <div class="circle" >KU<div>
</div>

和CSS：

.outer {
  width: 280px;
  border: 1px solid black;
  margin: 0 auto;
  text-align:center;
}

.circle {
  display:inline-block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color:red;
  color:white;
  font-weight: bold;
  font-size: 24px;
  position:relative;
}
img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
  position:relative;
}

如何让这些头像直线显示？

Answer 1

使用可以在display:inline-flex

上使用.outer

.outer {
  width: 280px;
  border: 1px solid black;
  display:inline-flex;
}

以下是JSfiddle

Answer 2

将vertical-align: top;添加到您的.circle元素中。这会将所有项目垂直对齐到顶部。

见这里：http://jsfiddle.net/dqsnbma5/2/

Answer 3

您可以合并img和.circle的样式，然后添加一些规则以达到预期的效果：

vertical-align: top确保display: inline-block元素在Y轴上对齐
text-align: center让文字在圆圈中水平居中
line-height: 60px让文字在圆圈中垂直居中

下面的现场演示：

.outer {
  width: 280px;
  border: 1px solid black;
  text-align: center;
}

.circle,
img {
  display: inline-block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  vertical-align: top;
}

.circle {
  background-color: red;
  line-height: 60px;
  color: white;
  font-weight: bold;
  font-size: 24px;
}

<div class="outer">
  <div class="circle">1</div>
  <img src="https://pbs.twimg.com/profile_images/887828156886986752/F7XIdhSg_400x400.jpg" />
  <div class="circle">KU</div>
</div>

Answer 4

尝试使用css flex-box

＆＃13;

segments_1

＆＃13;

.container {
  display: inline-flex;
  border: 1px solid red;
  padding: 10px;
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 10px;
  background-color: green;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

Answer 5

.outer {
  width: 280px;
  border: 1px solid black;
  margin: 0 auto;
  text-align:center;
}

.circle {
  display:inline-block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color:red;
  color:white;
  font-weight: bold;
  font-size: 24px;
  position:relative;
  vertical-align:top;
}
img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
  position:relative;
}

<div class="outer">
  <div class="circle" style="left:0;">1</div>
  <img  src="https://pbs.twimg.com/profile_images/887828156886986752/F7XIdhSg_400x400.jpg" />
  <div class="circle" >KU</div>
</div>

水平对齐文本和图像头像

5 个答案: