Question

好的，我知道这是已知解决方案的已知问题，但我无法在我的网页上使用它。所以我有一个简单的html：

<div id="sloganctnctn">
    <div id="sloganctn">
        <p id="slogan">
            A long line that can go to several lines on small width...
        </p>
    </div>
</div>

和css：

#sloganctnctn
{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 105px;
    font-family: hos;
    font-size:1.5rem;
    color:#378de2;
}
#sloganctn
{
    display:inline-block;
    width: 100%;
    height: 100%;

    line-height: 105px;
}
#slogan
{
    text-align: center;
    vertical-align: middle;
    line-height: 2;
}

但这不起作用，请参阅jsfiddle：http://jsfiddle.net/Sw3Jd/600/

由于

Answer 1

您可以使用CSS Flex通过将弹性项目对齐到Flex容器的中心来实现所需的效果。我已经评论了CSS，以便您可以在下面的示例中看到我添加/更改的内容。我还在身体上应用了背景颜色，以便在jsfiddle示例中更容易看到中心对齐。

html{
    font-size:12px;
    margin:0;
}
body{
    font-size:1rem;
    margin:0;
    background:#EBEBEB;
}
div{
    box-sizing:border-box;
}

#head{
    width:100%;
    height:105px;
    background:#fff;
    position:relative;
}

#sloganctnctn{
    position:absolute;
    top:0;
    left:0;
    bottom:0;/** ADDED **/
    right:0;/** ADDED **/
    font-family: hos;
    font-size:1.5rem;
    color:#378de2;
  
    /** ADDED BELOW SECTION **/
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

#sloganctn{
    /** REMOVED SOME STYLES HERE **/
    display:inline-block;
    width:100%;
}

#slogan{
    text-align: center;
    vertical-align: middle;
    line-height: 2;
}

<body>

<div id="head">

  <div id="sloganctnctn">
    <div id="sloganctn">
      <p id="slogan">
        A long line that can go to several lines on small width...
      </p>
    </div>
  </div>
  
</div>

Answer 2

将#sloganctn，#slogan更改为：

#sloganctn
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

#slogan
{
  text-align: center;
}

http://jsfiddle.net/bd15p9x6/ 或者将#slogan更改为：

#slogan
{
  text-align: center;
  vertical-align: middle;
}

http://jsfiddle.net/o80hz2pg/

无法使用css

2 个答案: