Question

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

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

这就是我现在所拥有的。

 Some Text 1
    Some Text 2
   Some Text 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

您的图像尺寸似乎会导致偏移。如果你可以将所有这些宽度相同，它应该排成一行。

我能想到的两个选项是：

快速又脏 - 使用表格。如果你要去做一个设计工作，这通常会让你过去。
使用两个div，设置它们的宽度，并在第一个使用类似于无序列表的东西 - 这将适用于您的图像以及图像右侧的任何内容。在第二个你放文本。您希望设置这些列的位置：relative，float：left，display：inline-block

这将实现的是，您的图像将位于自己的“框”中并与该框对齐。并且您的文本将位于其自己的“框”中并与该框对齐。框边缘不会重叠，因此您不必担心各个项目之间的宽度变化。在列上使用边框：0，它将具有完全的视觉感受。

Answer 2

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

CSS

p {
   vertical-align:middle;
}

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

Answer 3

你也可以选择它。即使它不是最漂亮的。

如何对齐文本垂直CSS

3 个答案: