Question

我试图在div框（背景色）内水平和垂直对齐文字，但我无法做到。

我已经在线搜索了margin: auto，text-align: center没有完成这项工作。

任何提示？

检查FIDDLE。

HTML

<div id="services"><div class="holder container clearfix">
<div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
<div class="bgprice"><span class="price">10€</span></div>
</div></div>

CSS

#services .holder .bgtop{
    background-color: #27ae60;
    height:50px;
    width:200px;
    z-index: 1;
}
#services .holder .bgprice{
    height:50px;
    width:90px;
    background-color: #272727;
    z-index: 1;
}
#services .holder span.top{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 1.000em;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;  
    margin: auto;
    text-align: center;
}
#services .holder span.price{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 1.500em;
    z-index: 2;
    text-align: center;
}

Answer 1

以下是用于垂直/水平居中的常用方法。

BASIC EXAMPLE HERE

div {
    background: red;
    width:100px;
    height: 100px;
    display:table;
}
div > span {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

基本上，父元素的显示更改为table。添加子元素，在本例中为span元素以包装文本。对于垂直居中，span应具有display:table-cell / vertical-align:middle属性。然后text-align:center仅用于水平居中。

以下an example使用了您的样式。

Answer 2

有不同的方式。这是一个：

HTML：

<div>
    <span>magix!</span>
</div>

CSS：

div {
    text-align:center;
    display:table;
}
span { 
    display: table-cell;
    vertical-align:middle;
}

Fiddle

Answer 3

您可以只将CSS更改为此（无HTML更改）：

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  text-align: center;
  line-height: 100px;
}

text-align不言自明。 line-height通过将单行的高度与div的高度相匹配来强制文本到中心。您每次都必须根据自己的需要进行调整。

JSFiddle

使用CSS进行文本的垂直和水平对齐

3 个答案: