相关疑难解决方法(0)

如何使用CSS垂直居中文本？

我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.

这是我的div风格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<div id="box">
  Lorem ipsum dolor sit
</div>

Run Code Online (Sandbox Code Playgroud)

做这个的最好方式是什么？

html css vertical-alignment

Ira*_*ili

2019 02-27

2190
推荐指数

19
解决办法

314万
查看次数

每次我遇到一个用例时，vertical-align它是否真正有效似乎都是一个抛硬币的问题。我知道它必须应用于内联元素。我读到我必须line-height为通常没有的元素指定一个。我读到该height属性必须具有静态（非自动/非％）值。我读到，vertical-align如果某些（现代）浏览器所使用的元素不是自然的内联元素，则它们无法正确处理。我不清楚是否vertical-align应该位于包含元素（例如text-align）或我想要垂直对齐的元素上。

我创建了这个 jsfiddle来尝试解决问题，但仍然感到困惑。

#outer {
  box-sizing: border-box;
  border: red 1px solid;
  height: 200px;
  width: 400px;
  text-align: center;
}

#inner {
  border: blue 1px solid;
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}
    
#header {
  border: green 1px solid;
  display: inline-block;
  line-height: 1em;
  margin: 0;
}

Run Code Online (Sandbox Code Playgroud)

<div id="outer">
  <div id="inner">
    <h1 id="header">
      Some Text
    </h1>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

在上面的 jsfiddle 中，我希望#header位于和顶部和底部之间的中间#outer …

html css vertical-alignment

Cli*_*ong

2020 08-26

5
推荐指数

1
解决办法

446
查看次数

垂直对齐内联元素

HTML

<html>
    <head>
        <style type="text/css">
            div {
                height: 300px;
                width: 300px;
                background-color: aqua;     
                margin-bottom: 10px;
            }           
            div > span {                
                vertical-align: middle;
                background-color: orange;               
                font-size: 3em;
            }    
        </style>
    </head>
    <body>          
        <div>           
            <span>Hello!</span>
        </div>          
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在下图中,Actual是上面呈现的HTML,而Expected是我需要的布局.