Question

Demo

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

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

我不想使用top margin-top，padding-top。我更喜欢能够改变圆圈尺寸的东西。

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

请提出一些解决方案。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你有太多的显示：表格和显示：你正在做的任务的表格单元格。

试

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

Jsfiddle

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和body中需要100％的高度才能使页面全高。

这是codepen：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;
  }
}

Demo

Answer 6

在父类中添加以下样式

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

这将使水平和垂直范围对齐

水平和垂直对齐span元素

6 个答案: