Question

我的风格包括背景和文字。我想在正确的背景中间对齐文本。

目前文字下面的空间比上面多。

我该怎么做？

查看我的jsfiddle：http://jsfiddle.net/vc256tgL/10/

这是我的代码：

    <p class="form-title white">
    Download White Paper</p>

这是我的css：

.form-title {
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}

.form-title {
    vertical-align: middle;
    height: 55px;
    margin: 0 0 0 0;
    background-image: url('http://www.hapadesign.com/assets/img/bkgd_form_top.png');
    background-repeat: no-repeat;
}

.white { color: #ffffff !important;}

Answer 1

请将这些行添加到form-title课程

line-height:40px;
text-align:center;
background-position:center;

Demo

更新1：

Updated Demo

Answer 2

如果您想要更多灵活性，可以使用CSS模拟该样式：

<强> CSS

.tooltip {
   position: relative;
   display: inline-block;
   padding: 10px 25px;
   color: #fff;
   background: blue;
}
.tooltip:after {
   content: '';
   position: absolute;
   top: 100%;
   right: 0;
   left: 0;
   width: 0;
   height: 0;
   margin: 0 auto;
   border-width: 10px;
   border-style: solid;
   border-color: blue transparent transparent;
}

<强> HTML

<p class="tooltip">Here's Some Text</p>

工具提示箭头是使用没有高度或宽度的元素上的边框创建的，因此它会生成您正在寻找的角度。

示例：http://codepen.io/a_double/pen/XJjKRg

如何在文本的正中间对齐文本

2 个答案: