如何对齐文本垂直CSS

Question

我正在编写一个简单的公文包。我是一名软件开发人员，所以我在CSS方面没有足够的知识。我想将文本垂直排列成一行。我想做什么的例子如下。

部分文本1
部分文本2
部分文本3

这就是我现在真正拥有的。

部分文本1部分文本2部分文本3

正如你所看到的，我想删除空白处（blanko）。我使用我在CSS中设计的<p>标记（段落）。

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

如果你还不明白这个问题，我在下面贴了一张照片。第一个面板显示了我目前拥有的东西，第二个面板显示我想要制作的东西。请注意，第二块面板是经过设计的。

Answer 1

似乎是您的图像大小导致了偏移。如果你能让所有这些都是相同的宽度，它应该排成一行。

我脑海中能想到的两个选项是：

1. 又快又脏——用一张桌子。如果你要找一份设计工作，这通常会让你失望。

2. 使用两个div，设置它们的宽度，在第一个div中使用类似于无序列表的东西——这将用于您的图像和图像右侧的任何内容。在第二个例子中，你把文本放进去。这些列你想设置的位置：相对，浮动：左边，显示：内联块

这将实现的是，您的图像将位于自己的"框"中，并与该框对齐。您的文本将位于自己的"框"中，并与该框对齐。方框边缘不会重叠，因此您不必担心单个项目之间的宽度可变。如果列上有一个边框：0，它将有一种完全存在的视觉感觉。

Answer 2

我认为这就是您所需要的：

css

p {
   vertical-align:middle;
}

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

Answer 3

即使它不是最漂亮的，你也可以直接点击它。