如何对齐文本垂直CSS

Question

我正在编写一个简单的投资组合。 我是软件开发人员，所以我对CSS没有足够的了解。 我想将文本垂直对齐。 我想做的例子是波纹管。

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

这就是我目前的实际状况。

Some Text 1
    Some Text 2
   Some Text 3

如您所见，我要删除该空白空间（空白）。 我使用在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，设置其宽度，在第一个中使用类似于无序列表的内容-这将用于您的图像以及图像右侧的任何内容。 在第二个中，您输入了文本。 您想设置位置的这些列：相对，浮动：左，显示：内嵌块

这将完成的工作是图像将位于其自己的“框”中并与该框对齐。 您的文本将在其自己的“框”中并与该框对齐。 盒子的边缘不会重叠，因此您不必担心各个项目之间的宽度可变。 带有边框：列上为0，将具有整体的视觉效果。

Answer 2

我认为这是您需要的：

的CSS

p {
   vertical-align:middle;
}

此处是w3schools.com http://www.w3schools.com/cssref/pr_pos_vertical-align.asp上垂直对齐的说明

Answer 3

即使它不是最漂亮的，也可以将其TAB插入。