如何在jQuery滑块中使文本居中对齐

Question

我的网站是http://daplonline.in/

我有滑块jquery形式： http : //designm.ag/tutorials/image-rotator-css-jquery/

我想在“垂直对齐中间”显示H2文本

我的缩略图看起来不错，但我想使H2文本显示在div的中间

我需要顶部和底部样式或它。 我目前的风格是

html .image_thumb ul li h2 {
    font-size: 1.4em; 
    margin: 5px 0; padding: 0;
    vertical-align:central;
}

但不起作用:(

我想为显示h2文本的中间“顶部和底部” opp滑块的缩略图添加样式。

Answer 1

您可以在本文中检查操作方法：

http://css-tricks.com/centering-in-the-unknown/

例：

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 2

我不会长期建议这种解决方案。 但是，如果您的内容是静态的，则可以使用此快速解决方案。 将以下内联样式应用于<H2>为2,3和4。

line-height: 40px;

<h2 style="line-height: 40px;">Mock test</h2>
<h2 style="line-height: 40px;">Power Crash Course</h2>
<h2 style="line-height: 40px;">Crash Course</h2>

Answer 3

如果文本仅是一行并且父div高度具有固定的像素值，则可以使line-height与父容器height相同

http://jsfiddle.net/A2HQx/

Answer 4

将以下属性添加到相应的类中：

.image_thumb ul li { 
    display: table-cell;
}
.image_thumb img, html .image_thumb ul li h2 { 
    display: table-cell; 
    vertical-align: middle;
}