0

我正在编写一个简单的投资组合。我是软件开发人员，所以我没有足够的 CSS 知识。我想连续对齐文本。我想做的例子如下。

一些文本 1
一些文本 2
一些文本 3

这是我目前真正拥有的。

一些文字 1
    一些文字 2
   一些文字 3

如您所见，我想删除那个空白空间（空白）。我使用<p>我在 CSS 中设置样式的标签（段落）。

p { 
    display: inline;
    color: #888;
    position: relative;
    text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
    text-align: center;
    padding: 8px 30px;
    font-family: helvetica, arial, sans-serif;
    display: inline-block;
    vertical-align:middle;
}

如果你仍然不明白这个问题，我在下面贴了一张图片。第一个面板显示我目前拥有的内容，第二个面板显示我想要制作的内容。请注意，第二个面板是设计好的。

4

3 回答 3

1

看来您的图像尺寸导致了偏移。如果你能让所有这些宽度相同，它应该排成一行。

我能想到的两个选项是：

  1. 又快又脏 - 使用一张桌子。如果你打算从事设计工作，这通常会让你错过。

  2. 使用两个 div，设置它们的宽度，并在第一个中使用类似于无序列表的东西 - 这将用于您的图像以及图像右侧的任何内容。在第二个中，您放置文本。您要设置的这些列位置：相对，浮动：左，显示：内联块

这将完成的是您的图像将位于它们自己的“盒子”中并与该盒子对齐。您的文本将位于其自己的“框”中并与该框对齐。盒子边缘不会重叠，因此您不必担心各个项目之间的可变宽度。在列上加上border: 0，就会有一种浑然一体的视觉感受。

于 2013-07-01T00:30:43.183 回答
0

我认为这就是你需要的：

css

p {
   vertical-align:middle;
}

这里是 w3schools.com http://www.w3schools.com/cssref/pr_pos_vertical-align.asp上垂直对齐的描述

于 2013-07-01T00:30:00.533 回答
0

即使它不是最漂亮的，您也可以直接使用 TAB。

于 2013-07-01T00:34:14.520 回答