如何在每个 <div> 中垂直和水平居中每个文本元素，以便文本恰好位于中间

Question

我正在尝试创建九个圆圈，每个圆圈中都有一个人的照片，每个人的名字直接位于每张图片的中间。下面是我的 HTML 和 CSS 文件。我试过使用 text-align: center 但它看起来不准确？此外，它只水平移动文本而不是垂直移动文本，即不移动到图像的中心，只移动到图像顶部的中心。谢谢你。

    <div class="friend">Stacey</div>
    <div class="Sexy">Caroline</div>
    <div class="friend"; id="best_friend">Adam</div></br>
    <div class="boss">Paul</div>
    <div class="friend">Phil</div>
    <div class"colleague"; id="archnemesis">Luca</div>
    <div class="friend">Ruth</div>
    <div class="family">Mum</div>
    <div class="enemy">Satan</div>


</body>

**My CSS file below:**

div {
    display: inline-block;
    margin-left: 5px;
    border: 2px solid black;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    text-align: center;
    }

.friend {
    border: 2px dashed #008000;
    }

.family {
    border: 2px dashed #0000FF;
}

 .enemy {
     border: 2px dashed #FF0000;
}

.colleague {
    border: 2px solid brown;
}

.boss {
    border: 5px solid pink;
}

.sexy {
    border-color: purple;
}

#best_friend {
    border: 4px solid #00C957;
}

#archnemesis {
    border: 4px solid #CC0000;
}

Answer 1

您可能想要以下内容：

<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="margin-left:auto;margin-right:auto;"></div>
  </div>
</div>

这可能对以后有帮助http://howtocenterincss.com

Answer 2

您可以使用 vertical-align:middle，但这需要 table，您可以使用 display:table-cell 来欺骗它。

我建议使用 line-height 和圆圈的高度，这只适用于 1 行文本，如果你使用多行，则必须使用内部 div 或 span。

如果水平方向看起来不准确，可能是填充。

div {
  display: inline-block;
  margin-left: 5px;
  border: 2px solid black;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  text-align: center;
  padding:0;
  line-height:100px;
}

Answer 3

<html>
<head>
<style>
div {
    display: inline-block;
    margin-left: 5px;
    border: 2px solid black;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    text-align: center;
}
span.center-content {
  display: inline-block;
  vertical-align: middle;  
  line-height:100px; 
}
.friend {
    border: 2px dashed #008000;
    }

.family {
    border: 2px dashed #0000FF;
}

 .enemy {
     border: 2px dashed #FF0000;
}

.colleague {
    border: 2px solid brown;
}

.boss {
    border: 5px solid pink;
}

.sexy {
    border-color: purple;
}

#best_friend {
    border: 4px solid #00C957;
}

#archnemesis {
    border: 4px solid #CC0000;
}
</style>
</head>
<body>
    <div class="friend"><span class="center-content ">Stacey</span></div>
    <div class="Sexy"><span class="center-content ">Caroline</span></div>
    <div class="friend"; id="best_friend"><span class="center-content ">Adam</span></div></br>
    <div class="boss"><span class="center-content ">Paul</span></div>
    <div class="friend"><span class="center-content ">Phil</span></div>
    <div class="colleague"; id="archnemesis"><span class="center-content ">Luca</span></div>
    <div class="friend"><span class="center-content ">Ruth</span></div>
    <div class="family"><span class="center-content ">Mum</span></div>
    <div class="enemy"><span class="center-content ">Satan</span></div>
</body>
</html>

变化

向所有跨度添加了新跨度和公共 class - center-content
添加了新的 class 样式 - span.center-content
您需要为 div 保持相同的高度和跨度以使其位于每个 div 的中间。

您可以在浏览器上测试上面的代码，或者访问此演示 url - https://jsfiddle.net/BRxKX/4962/

如何在每个 <div> 中垂直和水平居中每个文本元素，以便文本恰好位于中间

How can I centre each text element within each <div> both vertically and horizontally, so that the text is exactly in the middle

html

css

alignment