Question

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

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

我正在尝试复制黄色LIVE蓝色相机在标题中的部分。我想将文本排列到相机镜头的位置。图形是60X55。我已经尝试了几个小时玩线高，填充顶部和其他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中不再提供的其他选项。

任何帮助都将不胜感激。

Answer 1

您通常可以将CSS中的块级项目居中，如下所示：

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

将左右边距设置为自动可以解决问题。

尝试absolute positioning当你需要真正具体时：

如果您正在构建一个基本网站，Ruby on Rails和Twitter Bootstrap是过度的，只会使事情变得复杂。你可以试试WordPress吧。

试图将文本排列成图像

1 个答案: