水平和垂直对齐跨度元素

Question

演示

  <div class="subject" index= "0">
        <span class="subject_name">FIFA</span>
        <span class="subject_completion">55%</span>
    </div>

.subject span
{ 
 display: table-cell;
 vertical-align: middle;
}

为什么它没有垂直对齐我的跨度 div？ 我如何垂直对齐它也不应该影响水平对齐？

我不喜欢使用 top, margin-top , padding-top 。 我更喜欢即使我的圈子大小发生变化也能起作用的东西。

我也可以自由修改 html，但我首先更喜欢跨度而不是 div。

请提出一些解决方案。

Answer 1

对于span您根本不需要任何特殊规则。 您可以将这三个规则添加到容器中：

.subject {
    display: flex;
    align-items: center;
    justify-content: center;
}

 .user_body_content_container { display: table; } .subject_container { width: 200px; height: 250px; border: 1px solid #eee; display: table-cell; } .subject { border-radius: 50%; border: 1px solid #653; width: 175px; height: 175px; margin: auto; margin-top: 25%; display: flex; align-items: center; justify-content: center; }

 <div class="user_body_content_container"> <div class="subject_container" id="subject_container0" index="0"> <div class="subject" index= "0"> <span class="subject_name">FIFA</span> <span class="subject_completion">55%</span> </div> </div> </div>

Answer 2

您有太多 display: table 和 display: table-cell 用于您正在执行的任务。

尝试

.user_body_content_container
{

}

.subject_container
{
    width: 200px;
    height: 250px;
    border: 1px solid #eee;
    /*display: table-cell;*/
    /*remove above*/
}

.subject
{
    border-radius: 50%;
    border: 1px solid #653;
    width: 175px;
    height: 175px;
    margin: auto;
    margin-top: 25%;
    display: table;
    text-align: center;
}

.subject span
{ 
    display: table-cell;
    vertical-align: middle;
}

提琴手

Answer 3

您可以使用以下 CSS 类。

.user_body_content_container
{
    display: table;
}

.subject_container
{
    width: 200px;
    height: 250px;
    border: 1px solid #eee;
    display: table-cell;
    position:absolute;
}

.subject
{
    border-radius: 50%;
    border: 1px solid #653;
    width: 175px;
    height: 175px;
    margin: auto;
    margin-top: 25%;

}

.subject span
{ 
    display:block;
    position: relative;
    top:50%;
   text-align:center;
}

Answer 4

所以这是我想出的解决方案：

css：

body, html{
margin:0; padding:0;height:100%
}
.user_body_content_container{
height:100%;
}
.subject_container{
display:table;
width:100%;
height:100%;
vertical-align:middle
}
.subject 
{ 
display: table-cell;
vertical-align: middle;
text-align:center;}
.subject span{border:1px solid black;width:175px; display:inline-block}
/*no height given, to give it room to adjust for long texts*/

用长文本和短文本对其进行了测试，它似乎可以正常工作。

注意：容器`div's 和 body 中需要 100% 的高度才能使页面全高。

这是代码笔： http ://tinyurl.com/klzknog

Answer 5

垂直对齐有三种方式：flexbox、display：table-cell 和 position。

HTML

<div class="container one">
  <p>I'm a text</p>
</div>
<div class="container two">
  <p>I'm a text</p>
</div>
<div class="container three">
  <p>I'm a text</p>
</div>

CSS (Sass)

.container {
  width: 200px;
  height: 200px;
  border: 1px solid tomato;
  float: left;
  margin-right:1em;
}

.one {
  display: table;
    p {
      display:table-cell;
      vertical-align: middle;
  }
}

.two {
  display: flex;
  align-items: center;
}

.three {
  position: relative;
  p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

演示

Answer 6

将以下样式添加到父类

.subject{
text-align: center;
display: table-cell;
vertical-align: middle;
}

这将水平和垂直对齐跨度