Question

我有滑块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文本中间“TOP和bottom”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＆amp;第四。

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

如何在jquery滑块中使文本对齐中间

4 个答案: