html - 使用 Bootstrap 将 span 放置在 div 下

Question

我正在尝试将更多 Bootstrap 元素实现到我正在处理的元素中。我有一个圆形的 div，下面有一些文字“转到主页”。我希望跨度在 div 下方居中并位于一行上——如何使用 Bootstrap 实现这一点？

.avatar {
	margin: 10px;
	border-radius: 50%;
	height: 90px;
	text-align: center;
	width: 90px;
	float: right;
	border: 5px solid #fafafa;
  background-color: blue;
}

.initials {
	font-size: 2rem;/* 50% of parent */
	position: relative;
	top: 1.2rem; /* 25% of parent */
	color: #fafafa;
	font-weight: 700;
	}
  
  .update-homepage-link {
	float: right;
	color: #fafafa;
	font-weight: bold;
  color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 col-xl-2 order-xl-3">
				<div class="avatar">
					<span class="initials"> WW </span>
				<a class="update-homepage-link" href="">Go to Homepage</a>
			</div>

以前，我使用以下方法将其置于圆形 div 下方的中心，但我被要求在 Bootstrap 中完成该元素。我一直在试验间距类，但我还没有找到正确的组合。谁能给点建议？

Answer 1

与bootstrap无关，请看修改后的CSS。如果你想将内容居中，请将完整的 div 包装到另一个带有 'text-center' 类的 div 中。

.avatar {
	margin: 10px;
	border-radius: 50%;
	height: 90px;
	text-align: center;
	width: 90px;
	border: 5px solid #fafafa;
  background-color: blue;
}

.initials {
	font-size: 2rem;/* 50% of parent */
	position: relative;
	top: 1.2rem; /* 25% of parent */
	color: #fafafa;
	font-weight: 700;
	}
  
  .update-homepage-link {
	color: #fafafa;
	font-weight: bold;
  color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 col-xl-2 order-xl-3">
				<div class="avatar">
					<span class="initials"> WW </span>
			    </div>
                <a class="update-homepage-link" href="">Go to Homepage</a>