0

我有一个使用 iWeb 开发的网站，您可以在其中拖动任何对象并制作非常好的网站。但是，它不适用于需要数据库的网站。因此，我正在使用 Ruby on Rails 3.2.3、CSS3、Bootstrap 2.0 等重写网站。

这是我正在重写的网站的链接。 http://www.iktusnetlive.com/Home.html

我正在尝试复制带有黄色 LIVE 的蓝色相机在标题中的部分。我想将文本排列到相机镜头所在的位置。图形为 60X55。我已经尝试了几个小时使用 line-height、padding-top 和其他 CSS 选项，但我无法让文本向下移动。

这是我的 HTML 代码，其中包含我想与相机镜头对齐的图形和文本：

<p class="align-center"><span id="camera-text"><span id="text-bold"><%= image_tag("live_transparent.png", alt: "iktusNETlive") %>&nbsp;&nbsp;To view FREE LIVE STREAMING VIDEO, you will need to create a FREE ACCOUNT and be logged in.</span></span></p>

这是我的 CSS 代码：

#camera-text {font-size: 15px; vertical-align: middle; color: @red;}

.align-center { text-align: center; }

#text-bold { font-weight: bold; }

我想知道这是否是我能够做到的。如您所见，我有一个渐变作为我的页面背景。我不知道这是否可以使用 Bootstrap、CSS3 或 HTML5。我会在当天创建一个表格并使用单元格填充和其他显然在 HTML5 中不再可用的选项。

任何帮助，将不胜感激。

4

1 回答 1

0

您通常可以像这样在 CSS 中居中块级项目：

.some-class {
    display: block; /* needed if you'd like to center an inline element */
    margin: 0 auto;
}

将左右边距设置为自动就可以了。

尝试绝对定位当您需要非常具体时：

如果你正在构建一个基本的网站，Ruby on Rails 和 Twitter Bootstrap 是多余的，只会使事情复杂化。当你掌握它的窍门时，你可以试试 WordPress。

于 2012-05-18T22:51:10.020 回答