文字与CSS的垂直和水平位置 [英] Vertical and Horizontal alignment of text with CSS

问题描述

我想对齐文本，水平和垂直，里面一个div箱（带背景色），但我不能够做到这一点。

我搜索在线和保证金：汽车，文本对齐：中心都没有做的工作

任何提示？

检查 FIDDLE 。

HTML

 ＆LT; D​​IV ID =服务＆GT;＆LT; D​​IV CLASS =持有人集装箱clearfix＆GT;
＆LT; D​​IV CLASS =bgtop＆GT;＆LT;跨度类=顶＆GT;科尔特cabelo + Afiar＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =bgprice＆GT;＆LT;跨度类=价格大于10€＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

CSS

  #services .holder .bgtop {
    背景颜色：＃27ae60;
    高度：50像素;
    宽度：200像素;
    的z-index：1;
}
#services .holder .bgprice {
    高度：50像素;
    宽度：90px;
    背景颜色：＃272727;
    的z-index：1;
}
#services .holder span.top {
    颜色：白色;
    字体样式：斜体;
    字体重量：大胆的;
    字体大小：1.000em;
    的z-index：2;
    顶部：0;
    底部：0;
    左：0;
    右：0;
    保证金：汽车;
    文本对齐：中心;
}
#services .holder span.price {
    颜色：白色;
    字体样式：斜体;
    字体重量：大胆的;
    字体大小：1.500em;
    的z-index：2;
    文本对齐：中心;
}
 

解决方案

您可以更改只是你的CSS来这（无HTML改变）：

  DIV {
  背景：红色;
  底部：0;
  高度：100像素;
  左：0;
  保证金：汽车;
  位置：绝对的;
  顶部：0;
  右：0;
  宽度：100像素;
  文本对齐：中心;
  行高：100像素;
}
 

在的text-align 是不言自明。该的line-height 强制由单行的高度匹配的div的文本为中心。你必须把它每次调整您的需求。

的jsfiddle

I'm trying to align a text, horizontally and vertically, inside a div box (with background color) but I'm not being able to do it.

I've searched online and margin: auto, text-align: center aren't doing the work.

Any tips?

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

解决方案

You can change just your CSS to this (no HTML changes):

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

The text-align is self-explanatory. The line-height forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.

JSFiddle

这篇关于文字与CSS的垂直和水平位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！